componentDidUpdate 中的先前状态和当前状态相同

Question

在每个模块的仪表板中，其布局数据（使用 react-grid-layout）与模块数据分开存储，并且每个模块数据都存储在数据库中。当前模块数据和布局数据存储在 Dashboard 组件状态中。componentDidMount()每当模块或布局的先前状态与当前状态不同时，我试图在内部调用单独的 axios POST 请求，以保存数据库中的更改。但是通过调试和日志记录，我看到prevState等于this.state.

以下是改变相关状态的componentDidMount()方法和方法：

componentDidUpdate(prevProps, prevState) {

// JSON.stringify comparison for proof of concept since the order does not change

        if(JSON.stringify(prevState.modules) !== JSON.stringify(this.state.modules))

            API.post('Adminusers/StoreUserModuleData', "module_data=" + JSON.stringify(this.state.modules))

                        .then((res) => console.log(res))

                        .catch(err => {throw new Error(err)});

        if(JSON.stringify(prevState.layouts) !== JSON.stringify(this.state.layouts))

            API.post('Adminusers/StoreAdminUserLayouts', "layouts=" + JSON.stringify(this.state.layouts))

                        .then((res) => console.log(res))

                        .catch(err => {throw new Error(err)});  

    }

addNewModuleInLayout(moduleData) {

        let newLayout = this.state.layouts;

        let newModule = this.state.modules;

        for (let key in newLayout) {

            if (newLayout.hasOwnProperty(key)) {

                newLayout[key].push({

                    i: moduleData.type,

                    x: (newLayout[key].length * 1) % 3,

                    y: Infinity,

                    w: 1,

                    h: 5

                });

某个模块的模块数据和布局数据的示例如下：

// layouts

{

 "md": [{ i: "current-user", x: 0, y: 0, w: 3, h: 5, isDraggable: false, isResizable: true }],

 "lg": [{ i: "current-user", x: 0, y: 0, w: 3, h: 5, isDraggable: false, isResizable: true }],

 "sm": [{ i: "current-user", x: 0, y: 0, w: 3, h: 5, isDraggable: false, isResizable: true }],

 "xs": [{ i: "current-user", x: 0, y: 0, w: 3, h: 5, isDraggable: false, isResizable: true }]

}

// module data

[{ type: "current-user", content: " ", title: "Current User Module" }]

任何人都可以指导我在这里做错了什么，这两个州都是平等的吗？

Answer 1

尝试在这两个更新您的数组声明addNewModuleInLayout，并removeModule以const newLayout = { ...this.state.layouts }; // from let newLayout = this.state.layoutsconst newModule = [...this.state.modules]; // from let newModule = this.state.modules在 cDM 中，您不会在状态上创建模块/布局数组的“新”副本，而是直接引用数组。当你更新数组时，你实际上改变了你的状态，所以当你prevState与this.state字符串化版本进行差异时是相等的。这不会深入复制您的布局对象，因此在推送到布局数组时您会遇到同样的问题。您可以通过在更新布局而不是推送时创建新数组来解决此问题newLayout[key] = [ ...newLayout[key],  {   i: moduleData.type,   x: (newLayout[key].length * 1) % 3,   y: Infinity,   w: 1,   h: 5 }]; // from newLayout[key].push({DATA}); in addNewModuleInLayout因为你用filter在removeModule你那里应该很好