如何使用React Hooks正确更新数组元素，解决复选框数组空值问题？

问题原因 #

• 复选框更新函数中每次创建空数组赋值，仅修改目标下标对应的值，其余位置自动变为空槽，直接覆盖了原有完整的布尔数组，所以得到[empty × 4, true]的异常结果。
• 初始赋值逻辑存在异步状态取值问题：setList是异步更新，调用后立即读取listInfo拿到的还是更新前的旧值，会导致初始数组长度不符合预期。

代码修复 #

1. 优化初始化逻辑 #

const [checkboxes, setCheckboxes] = useState([]);
const [listInfo, setList] = useState([]);

useEffect(() => {
  const getList = async () => {
    const response = await list.get('/list/')
    const resList = response.data
    setList(resList)
    // 直接用接口返回的列表生成初始全false数组
    setCheckboxes(new Array(resList.length).fill(false))
  }
  getList()
}, [])

2. 重写复选框变更处理函数 #

const handleChangeCheckbox = (event, i) => {
  const isChecked = event.target.checked;
  // 先浅拷贝原有复选框数组
  const updatedCheckboxes = [...checkboxes]
  // 仅修改目标下标对应的值
  updatedCheckboxes[i] = isChecked
  setCheckboxes(updatedCheckboxes)
}

3. 调用逻辑保持不变即可 #

<input key={i} type="checkbox" onChange={e => handleChangeCheckbox(e, i)}></input>

内容的提问来源于stack exchange，提问作者silviaa11