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

Question

我有一个数组，我可以在该数组上映射并返回一些复选框，但是我无法将状态传递给每个复选框，因此我可以控制每个复选框的值。

我试图获取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}
              />
            );
          })}

我正在寻找的是使复选框处于受控状态，以便当我将值从状态更改为也显示在UI上时