为什么更改对象属性后组件没有更新？

Question

还有其他堆栈溢出线程与这个问题有点相关，但回答非常简短。他们说，“使用扩展运算符”。但为什么？

在下面的代码中，我在单击对象firstName的属性user（即 a ）时进行更新state，但没有任何反应。这是为什么？

export default function App() {
  const [user, setUser] = useState({
    firstName: "Jhon",
    lastName: "Doe",
  });
  const changeFirstName = () => {
    const newUser = user;
    newUser.firstName = "David";
    setUser(newUser);
  };
  return (
    <div>
      <div>
        <p>First Name: {user.firstName}</p>
        <p>Last Name: {user.lastName}</p>
      </div>
      <button onClick={changeFirstName}>Change First Name</button>
    </div>
  );
}

Answer 1

每次你state给setState. Number对于诸如、String和 之类的原始值Boolean，很明显可以知道我们是否给出了不同的值。

另一方面，对于像Object和 之类的引用值，更改它们并不会将它们标记为不同。应该是不一样的记忆。查看您的注释代码以了解您做错了什么：Arraycontentreference

const newUser = user;        // does a reference copy, means newUser === user
newUser.firstName = "David"; // changes its content, but still newUser === user
setUser(newUser);            // at this point, it's like nothing has changed

解决方案可能是扩展运算符，它将在新内存上创建现有对象的副本reference，然后覆盖要更改的属性：

const newUser = {...user, firstName: "David"}; // creates a copy of user on a new reference and updates its firstName field
setUser(newUser);                              // new reference is given to setUser