javascript - componentDidUpdate 中的先前状态和当前状态相等

Question

在每个模块的仪表板中，其布局数据(使用react-grid-layout)与模块数据分开存储，并且每个数据都存储在数据库中。当前模块数据和布局数据存储在仪表板组件状态中。每当模块或布局的先前状态与当前状态不同时，我都会尝试在 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
                });
            }
        }

        newModule.push(moduleData);

        this.setState({layouts: newLayout, modules: newModule})
    }

removeModule(layoutId, type) {
        let newLayout = this.state.layouts;
        let newModule = this.state.modules;

        for (let key in newLayout)
            newLayout[key] = newLayout[key].filter(item => { return item.i !== layoutId })

        newModule = newModule.filter(item => {return item.type != type}); 

        this.setState({ modules: newModule, layouts: newLayout });
    }

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

// 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.layouts
const newModule = [...this.state.modules]; // from let newModule = this.state.modules

在 cDM 中，您不会在状态上创建模块/布局数组的"new"副本，而是直接引用数组。当您更新数组时，您实际上会改变您的状态，因此当您将 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

既然你在removeModule中使用了filter，你应该可以很好地实现