为什么用setState更新object时会出现无限循环？

在React中，使用setState方法更新组件的状态是一种常见的操作。当我们使用setState更新一个对象时，如果直接将新的对象赋值给状态属性，React会认为状态没有发生变化，从而不会触发重新渲染。为了确保状态的变化被正确地检测到并触发重新渲染，React要求我们在更新对象时使用新的引用。

然而，当我们在setState中更新一个对象时，如果我们直接使用原始对象的引用，即使对象的内容发生了变化，React也无法正确地检测到这个变化，从而导致无限循环的问题。这是因为React在比较对象是否相等时，只会简单地比较引用是否相等，而不会深度比较对象的内容。

为了解决这个问题，我们需要在更新对象时创建一个新的对象引用。一种常见的做法是使用对象的浅拷贝或深拷贝来创建一个新的对象，然后再进行更新操作。这样，React就能正确地检测到对象的变化，并触发重新渲染。

以下是一个示例代码，展示了如何使用浅拷贝来更新对象：

// 初始化状态
state = {
  user: {
    name: 'John',
    age: 25
  }
};

// 更新对象
updateUser = () => {
  const newUser = { ...this.state.user }; // 使用浅拷贝创建新的对象引用
  newUser.age = 26; // 更新对象的属性
  this.setState({ user: newUser }); // 使用新的对象引用更新状态
};

在上述示例中，我们使用了对象的浅拷贝{ ...this.state.user }来创建了一个新的对象引用newUser，然后更新了newUser的属性age，最后使用setState方法将新的对象引用newUser更新到状态中。

需要注意的是，浅拷贝只会创建对象的一层副本，如果对象中包含了嵌套的对象或数组，那么嵌套的对象或数组仍然会保持原始的引用。如果需要深度比较对象的内容，可以使用深拷贝方法，如JSON.parse(JSON.stringify(obj))，但需要注意深拷贝可能会带来性能上的开销。

总结起来，使用setState更新对象时会出现无限循环的问题是因为React无法正确地检测到对象的变化。为了解决这个问题，我们需要在更新对象时创建一个新的对象引用，可以使用浅拷贝或深拷贝来创建新的对象引用。