javascript - 为什么当我 setState 时我的 React Hook 没有更新？

Question

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

我怎样才能让这个函数导致状态更新？

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);