Реагировать |Один метод обмена для нескольких динамических выбора

Question

Я получаю ответ от API, как показано ниже json.Используя этот ответ, я генерирую динамический select.

Проблема: Невозможно выбрать другое значение для другого окна выбора.Я пытаюсь добиться с государством.Как динамически объявлять состояние в этом случае.

JSON

const jsonFields = {
  fields: [
    { name: "sex", value: ["m", "f"] },
    { name: "age", value: ["10", "20"] }
  ]
};

примечание: я не знаю имени ключа json, такого как пол и возраст.имя будет динамическим

Выберите изменение:

handleChange = event => {
        this.setState({ [event.target.name]: event.target.value });
    };

Загрузка полей:

loadfields = () => {
    const FieldsArray = [];
    let FieldsData = jsonFields.fields;
    FieldsData.forEach((val, index) => {
      let FieldsDatavalue = val.value;
      FieldsArray.push(
        <FormControl>
          <InputLabel htmlFor="controlled-open-select">{val.name}</InputLabel>
          <Select
            value=""
            onChange={this.handleChange}
            inputProps={{
              name: "age"
            }}
          >
            {FieldsDatavalue.map(option => (
              <MenuItem key={option} value={option}>
                {option}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      );
    });
    return FieldsArray;
  };

Сценарий: Код Песочница

Answer 1

Вы не сохраняете выбранное значение в своем состоянии, а name в inputProps жестко задано в 'age'.Если вы исправите эти проблемы, это сработает:

      <Select
        value={this.state[val.name] ? this.state[val.name] : ''}
        onChange={this.handleChange}
        inputProps={{name: val.name}}
      >

Вот ссылка CodeSandbox .

ОБНОВЛЕНИЕ: неопределенные значения приводят к тому, что метка перекрывается с выбранным значением,и поскольку вы извлекаете их динамически и не можете инициализировать их в состоянии, вы можете использовать условный this.state[val.name] ? this.state[val.name] : '' для исправления меток.(песочница обновлена)