React中如何从复选框获取嵌套数组并处理数据？

原因：HTML复选框的value属性仅支持字符串类型，直接传入对象/数组会被强制转为"[Object object]"，导致无法正确获取完整数据。下面是具体修正方案：

1. 修正复选框的value绑定 #

将value={[item]}改为传递唯一标识（比如item.procedure），后续通过这个标识匹配完整对象：

<Form>
  {othersOptions.map((item, index) => (
    <div key={index} className="mb-3">
      <Form.Check
        value={item.procedure}
        id={item.procedure}
        type="checkbox"
        label={`${item.procedure}`}
        onClick={handleChangeCheckbox('Others')}
        required
      />
    </div>
  ))}
</Form>

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

修改handleChangeCheckbox，通过value从othersOptions中匹配完整对象，再更新状态数组：

const handleChangeCheckbox = input => event => {
  const selectedProcedure = event.target.value;
  const isChecked = event.target.checked;
  // 根据procedure找到对应的完整对象
  const selectedItem = othersOptions.find(item => item.procedure === selectedProcedure);

  setChecked(current => {
    return current.map(obj => {
      if (obj.option === input) {
        if (isChecked) {
          // 勾选时，添加新对象到chosen数组（避免重复添加）
          if (!obj.chosen.some(item => item.procedure === selectedProcedure)) {
            return {...obj, chosen: [...obj.chosen, selectedItem]};
          }
        } else {
          // 取消勾选时，移除对应对象
          return {...obj, chosen: obj.chosen.filter(item => item.procedure !== selectedProcedure)};
        }
      }
      return obj;
    });
  });
};

3. 修正初始状态的语法错误 #

原useState的初始值存在语法缺失，补充闭合：

const [checked, setChecked] = useState([
  { 
    option: 'Others',
    chosen: []
  }
]);

4. 计算所选项目总价（用于收据页面） #

如果需要在页面实时显示总价，可以通过useMemo计算：

import { useMemo } from 'react';

const totalPrice = useMemo(() => {
  const othersChosen = checked.find(item => item.option === 'Others')?.chosen || [];
  return othersChosen.reduce((sum, item) => sum + item.price, 0);
}, [checked]);

// 在组件中使用：
<div>总价：{totalPrice}</div>

这样修改后，checked状态中的chosen数组会存储完整的对象（包含procedure和price），可以直接提交到MongoDB，也能方便地在收据页面读取价格数据。

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