React DOM 不會根據 setState 重新渲染

Question

我正在處理 React 應用程序的一部分，其中可以使用以下 JSX 代碼創建待辦事項：

<form>
    <div>
        <label htmlFor="subject">Subject: </label>
        <input type="text" value={todo.subject} onChange={e => handleInput(e, 'subject')} name="subject" id="subject"></input>
    </div>
    <div>
        <label htmlFor="duedate">Due date: </label>
        <input type="date" value={todo.duedate} onChange={e => handleInput(e, 'duedate')} name="duedate" id="duedate"></input>
    </div>
    <div>
        <label htmlFor="description">Description: </label>
        <textarea value={todo.description} onChange={e => handleInput(e, 'description')} name="description" id="description"></textarea>
    </div>
    <div>
        <label htmlFor="sidenote">Sidenotes: </label>
        <textarea value={todo.sidenote} onChange={e => handleInput(e, 'sidenote')} name="sidenote" id="sidenote"></textarea>
    </div>
    <button type="submit" onClick={e => handleSubmit(e)}>Submit</button>
</form>

todo state 和handleInput定義如下：

const [todo, setTodo] = useState({
    'subject': '',
    'duedate': '',
    'description': '',
    'sidenote': ''
});

const handleInput = (e, field) => {
    e.persist();
    setTodo(prevTodo => {
        prevTodo[field] = e.target.value;
        return prevTodo;
    });
}

通過在輸入更改后運行console.log(todo) ，我可以確認 state 已正確更新； 但是，這些 state 更改不會呈現為輸入元素的value 。 相反，將handleInput更改為以下內容解決了問題：

const handleInput = (e, field) => {
    e.persist();
    setTodo(prevTodo => {
        let newTodo = {...prevTodo};
        newTodo[field] = e.target.value;
        return newTodo;
    });
}

考慮到這兩個函數都正確更新了todo state，是什么導致后者 function 起作用而前者不起作用？

Answer 1

通常，在您的情況下，您必須返回一個淺表副本 object 而不是僅僅修改當前引用 state 的鍵，因為 React 不會比較鍵的深度，它只是通過===進行比較以檢查當前 state 和下一個 state 是否是不同然后決定是否重新渲染，你也可以重新編寫也可以工作：

const handleInput = (e, field) => {
   e.persist();
   setTodo(prevTodo => {
      return {
        ...prevTodo,
        [field]: e.target.value,
      }
   });
}