javascript - RadioGroup 内的 Dynamic FormControlLabel Radio 未被检查

Question

我使用 RadioGroup 组件通过 FormControlLabel 显示单选选项的动态列表。动态单选选项已成功显示，我可以使用 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) 似乎没有被选中。

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

提前致谢!

Answer 1

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

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