Loading... # 引言 最近做了一个React的项目,其中有个需求,管理复选框的状态,当我循环渲染时,导致之前的设置丢失。 # 基础代码 ```typescript const [checkBoxStatus, setCheckBoxStatus] = useState<any>({}) ``` # 错误示例 ```typescript setCheckBoxStatus({ ...checkBoxStatus, ['cb01']: true }) ``` 当时的想法是,设置前,先拷贝之前的,然后再修改,但是这种方式是不对的 # 正确示例 ``` setCheckBoxStatus((prevStatus) => ({ ...prevStatus, ['cb01']: true })) ``` # 结论 * **使用回调函数**:`setCheckBoxStatus` 使用回调函数 `(prevStatus) => ({ ...prevStatus, ...newStatus })` 来更新状态。这样做确保了每次更新时都基于最新的 `checkBoxStatus` 状态,而不会丢失之前的设置。 * **合并状态**:每次更新时使用解构赋值 `...prevStatus` 来合并之前的状态,避免覆盖之前的设置。 * **避免竞争条件**:回调函数方式能够避免由于状态异步更新带来的竞争条件问题,因为它确保了每次更新都基于最新的状态。 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 如果觉得我的文章对你有用,请随意赞赏