引言

最近做了一个React的项目，其中有个需求，管理复选框的状态，当我循环渲染时，导致之前的设置丢失。

基础代码

const [checkBoxStatus, setCheckBoxStatus] = useState<any>({})

错误示例

setCheckBoxStatus({
   ...checkBoxStatus,
   ['cb01']: true
 })

当时的想法是，设置前，先拷贝之前的，然后再修改，但是这种方式是不对的

正确示例

setCheckBoxStatus((prevStatus) => ({
   ...prevStatus,
   ['cb01']: true
}))

结论

• ​使用回调函数​：setCheckBoxStatus 使用回调函数 (prevStatus) => ({ ...prevStatus, ...newStatus }) 来更新状态。这样做确保了每次更新时都基于最新的 checkBoxStatus 状态，而不会丢失之前的设置。
• ​合并状态​：每次更新时使用解构赋值 ...prevStatus 来合并之前的状态，避免覆盖之前的设置。
• ​避免竞争条件​：回调函数方式能够避免由于状态异步更新带来的竞争条件问题，因为它确保了每次更新都基于最新的状态。