javascript - 在 React 中更改对象状态后组件不重新渲染

Question

还有其他 Stack Overflow 线程与此问题有点相关，但回答非常简短。我想创建一个可以更明确地处理在更改作为 对象 的 state 时出现的问题。

在下面的代码中，我在单击 user 对象的 firstName 属性时更新，它是一个 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 时，React 不会更新DOM。对于像 Number、String 和 Boolean 这样的原始值，很明显知道我们是否给出了不同的值。

另一方面，对于像 Object 和 Array 这样的引用值，更改它们的 content 不会将它们标记为不同。应该是不同的内存reference。查看您的注释代码以了解您做错了什么:

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

解决方案可能是 spread operator ，这将创建现有对象的副本，但在新内存 reference 上，然后覆盖要更改的属性:

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