反应中的 setState

Question

我有一个 api 来返回嵌套对象的结果。 初始状态如下图所示：

const [obj, setObj] = useState({
     name: null,
     age: null,
     address: {
         city: null,
         zipCode: null
     }
})

一旦 api 被调用并返回包含所有属性的结果，我们将调用 setObj。 我们需要像setObj({...obj, results})调用还是可以直接调用setObj(results) ？

根据我的理解，状态在反应中是不可变的，我们不能直接修改它。 如果我错了，请纠正我。 我发现一个类似的问题是为什么我不能直接修改组件的状态，真的吗？

提前致谢。

Answer 1

如果 API 返回的对象只包含现有属性的一个子集，例如

{
  name: 'foo'
}

那么您需要将现有对象传播到新状态以保留旧的null属性。

setObj({ ...obj, ...results });

如果需要，您还需要考虑深度克隆address - 请记住，传播只会创建浅拷贝，而不是深拷贝。

如果 API 返回的对象包含所有属性，那么您不需要关心前一个带有null的对象中的任何内容，因此您只需要

setObj(results);