0

我有一个类组件，其中数据是从后端获取的，它应该在前端呈现它。我使用了 react-beautiful-dnd 的拖放功能。有人可以告诉我哪里出错了。没有任何东西被渲染。先感谢您 ：）

class List extends Component {
    state = {
        users: {}
    }
    componentDidMount() {
        axios.get("http://localhost:8083/getmodules")
            .then(res => {
                this.setState({
                    users: res
                });
            })
    }
onDragEnd = result => {
        const { destination, source, reason } = result;
        // Not a thing to do...
        if (!destination || reason === 'CANCEL') {
            return;
        }

        if (
            destination.droppableId === source.droppableId &&
            destination.index === source.index
        ) {
            return;
        }

        const users = Object.assign([], this.state.users);
        const droppedUser = this.state.users[source.index];


        users.splice(source.index, 1);
        users.splice(destination.index, 0, droppedUser);
        this.setState({
            users
        });
    }

    renderUsers = (item, index) => {
        return <Draggable
            key={index}
            draggableId={index + ' '}
            index={index}>

            {(provided) => (
                <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                >
                    <div className='item'>
                        <div>{index + 1}</div>
                        <div>{item.moduleType}</div>
                        <div className='name'>
                            <div>{item.moduleName}</div>
                            <div>{item.duration}</div>
                        </div>
                    </div>
                </div>
            )}
 </Draggable>
    }
    render() {
        return (<DragDropContext onDragEnd={this.onDragEnd}>
            <div className='container'>
                <div className='users'>
                    <h1>Reorder to Set The Timeline</h1>
                    <Droppable droppableId="dp1">
                        {(provided) => (
                            <div ref={provided.innerRef} {...provided.droppableProps}>
                                {this.state.users.map(this.renderUsers)}
                                {provided.placeholder}
                            </div>
                        )}
                   </Droppable>
                 </div>
             </div>
        </DragDropContext>);
    }
}
export default List;

以下是获取请求的给定输出：

[
    {
        "module_id": 1,
        "module_type": "Pre-Reading",
        "module_name": "Pre-Reading",
        "duration": 120,
        "course": {
            "course_id": 1,
            "course_name": "AWS"
        }
    },
    {
        "module_id": 2,
        "module_type": "Instructional",
        "module_name": "Introduction and Course Overview",
        "duration": 30,
        "course": {
            "course_id": 1,
            "course_name": "AWS"
        }
    }
]
4

1 回答 1

0

在您的List组件中，您的状态初始化是错误的，users应该是数组而不是对象，因为您的响应样本是一个数组。

更新状态初始化如下

class List extends Component {
    state = {
        users: []
    }
    ....
    ....
}

您可以在此处查看代码的工作示例https://codesandbox.io/s/brave-rain-66wnx?file=/src/List.js

于 2021-01-01T12:29:09.757 回答