React.useState() 鈎子不反映新值

Question

問題：為什么我的 setContact() function 不起作用？

我的鈎子聲明：

const [contact, setContact] = useState({
fName: "",
lName: "",
email: ""});

我的用戶界面元素：

<input
      name="email"
      placeholder="Email"
      onChange={catchEmail}
      value={contact.email}
    />

我的 onChange 處理程序：

function catchEmail(event) {
const { value: email } = event.target;
setContact((prevValue) => {
  prevValue.email += email;
  return prevValue;
});

}

我知道如何使它工作，但我想了解這段代碼有什么問題。

Answer 1

更改 DOM（有時）很昂貴。 如果新的 state 與舊的 state 完全相同 ( === )，React 理解這一點不會重新渲染組件。

Here, since you're mutating the existing state and returning it, the new state is the same object as the old state, so React skips re-rendering.

您需要返回一個新的 object，以便 React 知道重新渲染。

setContact(prevValue => ({
  ...prevValue,
  email
}));

（您不想連接到現有的email值，您想將新的email state 值設置為新的完整輸入值，幾乎可以肯定）

你也可以通過分離不同的狀態值來避免這個問題，例如，這樣做：

const [email, setEmail] = useState('');

onChange={e => setEmail(e.target.vaue)}

通常建議使用掛鈎。