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.layouts

const 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你那里应该很好