Динамическое FormControlLabel Radio внутри RadioGroup не проверяется

Question

Я использую компонент RadioGroup для отображения динамического списка опций Radio, используя FormControlLabel. Динамические параметры радио успешно отображаются, и я могу получить выбранный параметр радио, используя onChange в RadioGroup. Однако, когда я проверяю опцию радио, эта конкретная опция не появляется "проверено".

Вот код, который я использую:

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, который делает результат доступным как опора.

Теперь, если я вручную добавлю несколько компонентов FormControlLabel в одну и ту же RadioGroup, я увижу, что она выбрана после выбора этой опции.

Я сделал два снимка экрана - это когда выбран ручной FormControlLabel: https://ibb.co/pL5Fy6L, и когда выбран один из моих динамических параметров: https://ibb.co/Jq7mLN4

Вы можете видеть, что во втором варианте опция «Женский» не проверяется, но выбранный вариант (20-06-2019), по-видимому, не проверяется.

Не могли бы вы помочь мне исправить это?

Заранее спасибо!

Answer 1

Для тех, кто может столкнуться с той же проблемой, вот что я делал неправильно.

Проблема заключалась в том, что я передавал целочисленное значение в value проп вместо строки вроде: value={single.id}, поэтому я добавил toString(), чтобы преобразовать его в строку следующим образом: value={single.id.toString()} и теперь она работает нормально .