高级前端react【Q552】关于 setState 以下代码的输出

关于 setState 以下代码的输出

更多描述 代码如下所示,每次切换 TODO 状态时,通过手动修改 todo.status 再 setTodo,此时是否会修改成功

代码见 setState - codesandbox

import { useState } from "react";
 
export default function App() {
  const [todo, setTodo] = useState({ id: 1, status: "TODO" });
  return (
    <div className="App">
      <button
        onClick={() => {
          todo.status = !todo.status;
          setTodo(todo);
        }}
      >
        Toggle Status
      </button>
      <h1>{todo.status}</h1>
    </div>
  );
}

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 566

Author 回答者: hellolukeding

state是只读的

Author 回答者: YuVincentxuan

补充一点:与 class 组件中的 setState 方法不同,useState 不会自动合并更新对象。