使用React根据后端响应更新checkbox值时无法取消勾选问题

你在初始化选中状态时，仅做了静态的属性赋值，没有将checkbox的选中状态绑定到可响应的状态变量，也没有添加状态同步的交互逻辑，导致点击checkbox时没有触发状态更新，自然无法取消勾选，也拿不到修改后的值。

• 调整行数据结构，新增selectedDependents字段存储当前行选中的checkbox值，初始化时直接把后端返回的dependents逗号分割的字符串转成数组赋值即可。
• 修改checkbox的checked属性绑定逻辑，改成判断当前checkbox的value是否在当前行的selectedDependents数组中，而非固定判断初始值。
• 给checkbox添加onChange事件，每次点击时更新对应行的selectedDependents数组：勾选时把对应值加入数组，取消勾选时过滤掉对应值。
• 提交数据前，把每行的selectedDependents数组重新转成逗号分隔的字符串，赋值给dependents字段传给后端即可。

点击新增行时的初始化逻辑：

const handleAdd = (row) => {
  // 从原始行数据里取后端返回的dependents做初始值
  const initSelected = row.dependents ? row.dependents.split(',') : []
  const newRow = {
    ...row,
    selectedDependents: initSelected
  }
  setTableData(prev => [...prev, newRow])
}

checkbox渲染逻辑：

<input
  type="checkbox"
  value="2"
  checked={currentRow.selectedDependents.includes('2')}
  onChange={(e) => {
    const updatedSelected = e.target.checked 
      ? [...currentRow.selectedDependents, e.target.value]
      : currentRow.selectedDependents.filter(val => val !== e.target.value)
    // 更新表格中对应行的状态
    setTableData(prev => prev.map(item => 
      item.id === currentRow.id ? {...item, selectedDependents: updatedSelected} : item
    ))
  }}
/>

提交前的数据处理：

const handleSubmit = async () => {
  const postData = tableData.map(item => ({
    ...item,
    dependents: item.selectedDependents.join(',')
  }))
  // 调用后端提交接口传入postData即可
}

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