为什么我的 globalState 状态对象在我自己更新之前被更新？

Question

我有一个多选项卡视图，我通过全局状态控制数据，并通过 useContext（连同 setState 更新程序函数）传递。

结构类似

globalState: {
    company: {
        list: [
            [{name: ..., ...}, {field1: ..., ... }],
            [{name: ..., ...}, {field1: ..., ... }],
            ...
        ]
    },
    ...
}

我在第一个选项卡中有一个表格，其中每一行显示每个内部列表数组 (globalState.company.list[X][0]) 的第一个对象中的详细信息，并且有几个复选框可以切换每个内部列表中第二个对象中的字段数组（globalState.company.list[X][1]）。

我遇到的问题是，当我选中特定字段的复选框时，所有公司都将该字段设置为该值之前我在来自复选框本身。

这里是创建复选框和处理程序的所有相关代码：

<td><Checkbox
    disabled={tpr.disabled} // true or false
    checked={tpr.checked} // true or false
    onChange={checkboxOnChange} // function handler
    targetId={company.id} // number
    field={"field1"} />
</td>

复选框定义

const Checkbox = React.memo(({ disabled, checked, onChange, targetId, field }) => {
    return (
        <input
            type="checkbox"
            style={ /* omitted */ }
            defaultChecked={checked}
            disabled={disabled}
            onChange={(e) => onChange(e, targetId, field)}
        />
    );
});

onChange 处理程序回调

const checkboxOnChange = (e, id, field) => {
    const checked = e.target.checked;

    console.log("GLOBAL STATE PRE", globalState.companies.list);

    let foundCompany = globalState.companies.list.find(company => company[0].id === id);
    foundCompany[1][field].checked = checked;
    console.log("foundCompany", foundCompany);

    console.log("GLOBAL STATE POST", globalState.companies.list);

    setGlobalState(prevState => ({
        ...prevState,
        companies: {
            ...prevState.companies,
            list: prevState.companies.list.map(company => {
                console.log("company PRE ANYTHING", company);
                if (company[0].id === foundCompany[0].id) {
                    console.log("Inside here");
                    return foundCompany;
                }
                console.log("company", company);
                return company;
            })
        }
    }));
};

我从 GLOBAL STATE PRE 日志中看到，如果我要为 field1 选中一个框，那么所有公司都会在我修改其他任何内容之前检查 field1。我可以确认，在选中该框之前，globalState 与我期望的一样，在加载时正确设置了所有数据和字段。

在下图中，我选中了第二家公司数组中的 TPR 框，在发生其他任何事情之前，第二家和第三家公司已经将 TPR 设置为 true。

任何帮助将不胜感激，我将分享我能够分享的更多细节。谢谢。

Answer 1

只是不要直接改变状态对象：

const checkboxOnChange = (e, id, field) => {
    const checked = e.target.checked;
    setGlobalState(prevState => ({
        ...prevState,
        companies: {
            ...prevState.companies,
            list: prevState.companies.list.map(company => {
                if (company[0].id === id) {
                    return {
                        ...company,
                        checked
                    };
                }
                return {
                    ...company
                };
            })
        }
    }));
};  

Answer 2

在您调用 setGlobalState 之前，globalState 对象正在更新，因为您正在改变当前状态（例如 foundCompany[1][field].checked = checked;）

解决此问题的一种方法是复制状态对象，使其不引用当前状态。例如

var cloneDeep = require('lodash.clonedeep');

...

let clonedGlobalState = cloneDeep(globalState);
let foundCompany = clonedGlobalState.companies.list.find(company => company[0].id === id);
foundCompany[1][field].checked = checked;

我建议使用像 Lodash's cloneDeep 这样的深度克隆函数，因为使用扩展运算符在您的实例中创建副本会在列表数组中创建对象的浅表副本。

一旦你克隆了状态，你就可以安全地将它更新到你想要的新状态（即不用担心改变现有的 globalState 对象），然后在调用 setGlobalState 时引用它。