反應，組件在對象狀態更改后不重新渲染

Question

還有其他 Stack Overflow 線程與這個問題有點相關，但回答得非常簡短。 我想創建一個更明確地處理更改state時發生的問題object 。

在下面的代碼中，我正在更新單擊user對象的firstName屬性，這是一個state ，但沒​​有發生任何事情。 這是為什么？

export default function App() {
  const [user, setUser] = useState({
    firstName: "Jhon",
    lastName: "Doe",
  });
  const changeFirstAndLastName = () => {
    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={changeFirstAndLastName}>Change First Name</button>
    </div>
  );
}

Answer 1

React 不會重新渲染，因為它就像什么都沒有改變，即每次你將相同的state賦予setState時。 對於像Number 、 String和Boolean這樣的原始值，很明顯知道我們是否給出了不同的值。

另一方面，對於像Object和Array這樣的引用值，更改它們的content不會將它們標記為不同。 它應該是不同的內存reference 。 查看您的注釋代碼以了解您做錯了什么：

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

解決方案可能是擴展運算符，將創建現有對象的副本，但在新的內存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