Javascript 如何在映射到数组时添加状态

我有一个数组，其中映射并返回一些复选框，但我无法将状态传递给每个复选框，以便控制每个复选框的值

我试图获取obj的键，因此我可以使用它们作为每个复选框的名称，但没有成功

"extras": [
  { "key": "womens", "value": "Women's" },
  { "key": "mens", "value": "Men's" },
  { "key": "negotiable", "value": "Negotiable" },
  { "key": "withPrice", "value": "With Price" }
]

<FormControlLabel
    label={label}
    labelPlacement={labelPlacement}
    className={classes.formControlLabel}
    control={
      <Checkbox
        defaultChecked={props.defaultChecked}
        name={name}
        value={values}
        onChange={handleChange}
        color="primary"
        inputProps={{
          "aria-label": "primary checkbox"
        }}
      />
    }
  />

const [state, setState] = useState({
  negotiable: false,
  womens: false,
  mens: false,
  withPrice: false
});

const handleCheckboxChange = event => {
  setState({ ...state, [event.target.name]: event.target.checked });
};

{extras.map(extra => {
            return (
              <CheckboxForm
                key={extra.key}
                name={extra.key}
                value={extra.key}
                label={extra.value}
                labelPlacement="end"
                handleChange={handleCheckboxChange}
              />
            );
          })}

“附加服务”：[
{“关键”：“女性”，“价值”：“女性”}，
{“key”：“mens”，“value”：“Men's”}，
{“键”：“可转让”，“值”：“可转让”}，
{“键”：“带价格”，“值”：“带价格”}
]
常量[状态，设置状态]=使用状态({
可协商：错，
女人：错，
男人：错，
withPrice:假
});
const handleCheckboxChange=事件=>{
setState（{…state，[event.target.name]：event.target.checked}）；
};
{extras.map（extras=>{
返回(
);
})}

---

我想要的是控制复选框，这样当我将值从状态更改为显示在UI上时

如果值是字符串，您将如何使用复选框检查状态值？花了一些时间，但这里有一种方法：

value={state[extra.key]}

@ChrisG nice我有一个类似的想法，虽然我的是一种更基本的形式。仍然有点不清楚OP在这里想要实现什么。非常感谢您的快速回复。这是完美的工作与我的案件只是一个小的变化。因为创建表单是完美的，现在我将为搜索表单找出一些类似的东西。如果值是字符串，您将如何使用复选框检查状态的值？花了一些时间，但这里有一种方法：如何：

value={state[extra.key]}

@ChrisG nice我有一个类似的想法，尽管我的想法更基本。仍然有点不清楚OP在这里想要实现什么。非常感谢您的快速回复。这是完美的工作与我的案件只是一个小的变化。因为create表单是完美的，现在我将为搜索表单找到类似的东西。