为什么我的 React Hook 在我设置状态时没有更新？

Question

我正在使用反应useState，其中状态是具有一些嵌套属性的对象。当我调用setState时，我没有看到重新渲染或状态正在更新。我假设反应是看到新状态等于旧状态，因此不会发生更新。所以，我先尝试克隆状态，但仍然没有看到任何更新。

如何让此函数导致状态更新？

export type TermEditorStateRecord = {
term: SolrTermType;
state: SolrTermEditorRecordState;
classifications: { [key: string]: string };
};
export type TermEditorStateRecordMap = {
[phrase: string]: TermEditorStateRecord;
};
const [records, setRecords] = useState({});
const setRecordClassification = (label, key, value) => {
const cloned = new Object(records) as TermEditorStateRecordMap;
cloned[label].classifications[key] = value;
setRecords(cloned);
};

对于 TypeScript 类型，我深表歉意，但我将它们包含在此处，以便您可以看到状态的预期形状。

它不是因为更改是深度嵌套而更新的吗？有没有办法让它工作，或者我需要以某种方式将变化的状态拉到它自己的状态？

Answer 1

new Object不会制作深层副本，因此setRecords它是相同的实例，并且不会触发重新渲染，

const obj = {
a: {
b: "b"
}
};
const copy = new Object(obj);
copy["c"] = "c";
console.log(obj);

您需要手动更新嵌套属性：

const setRecordClassification = (label, key, value) => {
setRecords(record => ({
...record,
[label]: {
...record[label],
classifications: {
...record[label].classifications,
[key]: value
}
}
}));
};

或者要创建副本，请使用：

const cloned = JSON.parse(JSON.stringify(record));
cloned[label].classifications[key] = value;
setRecords(cloned);