Предыдущее и текущее состояние равны в componentDidUpdate

Question

В сводной панели для каждого модуля его данные макета (с использованием response-grid-layout) хранятся отдельно от данных модуля, и каждый из них сохраняется в базе данных.Текущие данные модуля и данные макета хранятся в состоянии компонента Dashboard.Я пытаюсь вызывать отдельные POST-запросы axios внутри componentDidMount() всякий раз, когда предыдущее состояние модулей или макетов отличается от текущего, чтобы сохранить изменения в базе данных.Но с отладкой и ведением журнала я вижу, что 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. Вы не создаете «новую» копию своих массивов модулей / макетов в состоянии, а скореессылаться на массивы напрямую.когда вы обновляете массивы, вы фактически изменяете свое состояние, поэтому, когда вы diff 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, вам должно быть хорошо там