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

关于 setState 以下代码的输出

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

代码见 setState - codesandbox (opens in a new tab)

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 (opens in a new tab)

Author 回答者: hellolukeding (opens in a new tab)

state是只读的

Author 回答者: YuVincentxuan (opens in a new tab)

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