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

【问题标题】：Why isn't my React Hook updating when I setState?为什么当我设置状态时我的 React Hook 没有更新？
【发布时间】：2019-10-11 16:55:24
【问题描述】：

我正在使用 react 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 类型，我深表歉意，但我已将它们包含在此处，以便您可以看到预期的状态形状。

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

【问题讨论】：

标签： javascript reactjs typescript react-hooks

【解决方案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);

【讨论】：