Reactjs 在react中切换复选框

我想在单击复选框/按钮时切换选中属性。怎么做

var process = [
        { id: 0, name: "ONe", status: false },
        { id: 1, name: "two", status: false },
        { id: 2, name: "three", status: false },
        { id: 3, name: "four", status: false },
        { id: 4, name: "five", status: false },
        { id: 5, name: "six", status: false },
    ];

{process.map((eachProc) => {
                            const { id, name, status } = eachProc;
                            return (
                                <>
                                    <div key={id}>
                                        <h3>{name}</h3>
                                        <input type="checkbox" checked={status} />
                                        <button
                                            onClick={() => {
                                                status = !status;
                                            }}
                                        >
                                            Select
                                        </button>
                                    </div>
                                </>
                            );
                        })}

var进程=[
{id:0，名称：“一”，状态：false}，
{id:1，名称：“2”，状态：false}，
{id:2，名称：“三”，状态：false}，
{id:3，名称：“四”，状态：false}，
{id:4，姓名：“5”，状态：false}，
{id:5，姓名：“6”，状态：false}，
];
{process.map（（eachProc）=>{
const{id，name，status}=eachProc；
返回(
{name}
{
状态=！状态；
}}
>
选择
);
})}

---

这里出现的错误是状态是恒定的。

首先，像使用

状态一样使用
过程
：

const [process, setprocess] = useState([
    { id: 0, name: "ONe", status: false },
    { id: 1, name: "two", status: false },
    { id: 2, name: "three", status: false },
    { id: 3, name: "four", status: false },
    { id: 4, name: "five", status: false },
    { id: 5, name: "six", status: false },
]);

然后，单击时添加函数更改：

  const onClick = (id) => {
    setprocess(
      process.map((item) =>
        item.id === id ? { ...item, status: !item.status } : item
      )
    );
  };

最后，在
按钮和
复选框中添加
onClick
：

  {process.map((eachProc) => {
    const { id, name, status } = eachProc;
    return (
      <>
        <div key={id}>
          <h3>{name}</h3>
          <input type="checkbox" checked={status} onClick={() => onClick(id)} />
          <button onClick={() => onClick(id)}>Select</button>
        </div>
      </>
    );
  })}

{process.map（（eachProc）=>{
const{id，name，status}=eachProc；
返回(
{name}
onClick（id）}/>
onClick（id）}>选择
);
})}
需要状态来管理您的数据，例如

从“React”导入React；
导出默认函数App（）{
const[process，setProcess]=React.useState([
{id:0，名称：“一”，状态：false}，
{id:1，名称：“2”，状态：false}，
{id:2，名称：“三”，状态：false}，
{id:3，名称：“四”，状态：false}，
{id:4，姓名：“5”，状态：false}，
{id:5，姓名：“6”，状态：false}
]);
返回(
{process.map（（eachProc）=>{
const{id，name，status}=eachProc；
返回(
{name}
{
setProcess（（旧）=>
旧的.map（（项目）=>
item.id==id？{…item，状态：！status}:item
)
);
}}
>
选择
);
})}
);
}
使用
使用状态（流程）
然后切换状态