React中GraphQL获取的数组数据无法驱动多选框正常交互怎么办

问题原因 #

1. checkedState初始化时机错误
   你自定义的useLoadMembers是异步拉取数据，组件第一次渲染时members还是初始空数组，此时初始化的checkedState长度为0。等GraphQL请求成功、members更新为有值的数组后，checkedState不会自动同步更新长度，依然是空数组。
   此时渲染的每个多选框绑定的checked={checkedState[index]}取值都是undefined，相当于永远为false，点击后更新的checkedState长度和渲染的多选框数量不匹配，自然不会出现选中状态，也无法正确收集选中项。
2. updateLoading未定义（潜在报错）
   你在调用useLoadMembers(updateLoading)时，RecordGame组件内没有声明updateLoading函数，useLoadMembers中执行updateLoading(false)会抛出报错，也可能阻断逻辑正常执行。

修复方案 #

1. 监听members变化，同步更新checkedState长度
   在RecordGame组件内添加以下useEffect逻辑：

useEffect(() => {
  // members更新后，重置选中状态数组长度
  setCheckedState(new Array(members.length).fill(false))
}, [members])

2. 补充updateLoading状态定义
   在RecordGame组件内声明加载状态：

const [loading, setLoading] = useState(true)
// 调用useLoadMembers时传入正确的更新函数
const { members } = useLoadMembers(setLoading)

3. （可选优化）使用ID作为选中判断依据，避免数组顺序变动导致的选中混乱
   替换原有布尔数组形式的选中状态，改为存储选中成员的ID集合：

// 初始化选中集合
const [selectedIds, setSelectedIds] = useState(new Set())

// 选中逻辑
const handleOnChange = (id) => {
  const newSelected = new Set(selectedIds)
  newSelected.has(id) ? newSelected.delete(id) : newSelected.add(id)
  setSelectedIds(newSelected)
}

// 收集选中项
const playingPlayers = members.filter(player => selectedIds.has(player.id))

// 渲染多选框时的绑定
const playerCheckboxes = members.map((player) => {
  return (
    <div key={player.id}>
      <label htmlFor={player.id}>
        <input
          type="checkbox"
          id={player.id}
          name={player.name}
          checked={selectedIds.has(player.id)}
          onChange={() => handleOnChange(player.id)}
        />
        <span> {player.name}</span>
      </label>
    </div>
  )
})

这样实现更稳定，不受成员数组增删、排序的影响。

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