*以下是安装程序包时的完整错误堆栈消息

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: freeboard@0.1.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.5" from react-beautiful-dnd@13.0.0
npm ERR! node_modules/react-beautiful-dnd
npm ERR!   react-beautiful-dnd@"^13.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

以下是使用dragdropcontext和dropable from the package的完整代码，即完整组件Main。以下是使用dragdropcontext和dropable from the package的完整代码，即完整组件Main。

import { connect } from "react-redux"
import { DragDropContext, Droppable } from 'react-beautiful-dnd';

import SingleTask from "../SingleTask/SingleTask"

import "./Main.css"

const Main = (props) => {

    const [tasks, setTasks] = useState([])

    useEffect(() => {
        setTasks(...[props.tasks])
    },[props])

    return (
        <>
        <DragDropContext>
            <Droppable droppableId="Box1">
                {(provided) => (    
                    <div {...provided.droppableProps} ref={provided.innerRef}>
                        {provided.placeholder}
                        <div className="main-board">
                            <h2>FreeBoard</h2>

                            { tasks && tasks.map((task, index) => {
                                return (
                                    <div className="tasks-list" key={index}>
                                        <SingleTask taskName={task} indexCount={index}/>
                                    </div>
                                )
                            }) }
                        </div>
                    </div>
                )}
            </Droppable>
        </DragDropContext>
        </>
    )
}

const mapStateToProps = state => {
    return state
}

export default connect(mapStateToProps)(Main)