javascript - RadioGroup内部的Dynamic FormControlLabel Radio未得到检查

我正在使用RadioGroup组件使用FormControlLabel显示Radio选项的动态列表。动态单选选项已成功显示，我可以使用RadioGroup中的onChange检索选定的单选选项。但是，当我检查单选选项时，该特定选项不会显示为“已选中”。

这是我正在使用的代码:

export default class Book extends Component {
  state = {
    slot: null,
  };
  ...
  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };
  ...
  <FormControl component="fieldset" className={classes.formControl}>
    <FormLabel component="legend">Select availability slot</FormLabel>
    <RadioGroup
      aria-label="Slot"
      name="slot"
      className={classes.group}
      value={this.state.slot}
      onChange={this.onChange}
    >
      {this.props.experience.availability !== null ? (
        this.props.experience.availability.map(single => (
          <FormControlLabel
            key={single.id}
            value={single.id}
            control={<Radio color="primary" />}
            label={single.title}
          />
        ))
      ) : ""}
      // Some manual options in addition to the above dynamic list
      <FormControlLabel
        value="female"
        control={<Radio color="primary" />}
        label="Female"
      />
      <FormControlLabel
        value="male"
        control={<Radio color="primary" />}
        label="Male"
      />
    </RadioGroup>
  </FormControl>
  ...
}

this.props.experience.availability是我从后端进行的调用中得到的对象数组。通话正在componentDidMount()中进行。我使用Redux，它将结果用作 Prop 。

现在，如果我在同一RadioGroup中手动添加了几个FormControlLabel组件，则可以看到在选择该选项之后将其选中。

我拍了两个屏幕截图-这是在选择手动FormControlLabel时:https://ibb.co/pL5Fy6L，而这是在选择我的动态选项之一时:https://ibb.co/Jq7mLN4

您可以看到在第二个选项中，``女性''选项未被选中，但是我选择的选项(20-06-2019)似乎未被选中。

你能帮我解决这个问题吗？

提前致谢!

最佳答案

对于任何可能面临相同问题的人，这就是我做错的事情。

问题是我将一个整数值而不是像value这样的字符串传递给value={single.id} Prop ，所以我添加了toString()将其转换为这样的字符串:value={single.id.toString()}，现在可以正常工作了。

关于javascript - RadioGroup内部的Dynamic FormControlLabel Radio未得到检查，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56576143/