Я пытаюсь устранить проблему, которую я не могу решить. Проблема в том, что у меня есть выпадающее окно с тегом выбора с некоторыми пунктами меню в нем. Когда я нажимаю один из пунктов меню, значение не отображается в поле выбора, и оно просто пустое. Однако, когда я регистрирую выбранный элемент в консоли, я вижу, что я выбираю, который является пунктом меню. Вот код:

 <Select labelId="demo-simple-select-label" id="demo-simple-select" value={selectedMake} onChange={handleMake}>
              {console.log(makes)}
              {makes amp;amp;
                makes.map((select, key) => (
                  <MenuItem key={key} value={select}>
                      {console.log(select)}
                    {select.name}
                  </MenuItem>
                ))}
            </Select>
  

Если вам интересно, что такое «делает», это именно это:

 (3) [{…}, {…}, {…}]
0: {name: "Honda", id: "5de9c553bce4b703a335c204"}
1: {name: "Toyota", id: "5e4dfbee2d445b7525414c1f"}
2: {name: "Suzuki", id: "5e4e00732d445b7525414c46"}
  

Я не уверен, почему, например, когда выбран параметр Honda, он не отображается в поле. Я думаю, это может быть как-то связано с идентификатором. Дайте мне знать, как решить эту проблему.

Это также функция handleMake, это функция, которая передается в качестве реквизита из другого файла:

 handleMake = (event) => {
    this.setState({
      selectedMake: event.target.value.name,
      selectedMakeId: event.target.value.id,
    });
  };
  

Проблема

Объекты не могут быть значением параметра выбора, это должно быть значение, не относящееся к объекту. В вашем вы устанавливаете значение параметра для всего свойства «make object, but setting the Select value to *just* the make's name», которое никогда не будет совпадать.

 handleMake = (event) => {
  this.setState({
    selectedMake: event.target.value.name, // <-- make's name
    selectedMakeId: event.target.value.id,
  });
};

...

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={selectedMake} // <-- only a make's name
  onChange={handleMake}
>
  {makes.map((select, key) => (
    <MenuItem key={key} value={select}> // <-- entire make object!
      {select.name}
    </MenuItem>
  ))}
</Select>
  

Решение

Я предлагаю вместо этого сохранить выбранный индекс или id состояние.

Нет необходимости дублировать столько данных в состояние, поскольку вы можете легко получить марку и идентификатор автомобиля из сохраненного индекса массива или выполнить поиск по идентификатору. Если вы использовали данные из одного из объектов make, то вам нужно makes будет каждый раз искать в массиве ( O(n) линейное время), чтобы найти совпадение, но с помощью индекса вы можете получить только объект make, необходимый за O(1) постоянное время.

 handleMake = (event) => {
  this.setState({
    selectedMake: event.target.value,
  });
};

...

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={this.state.selectedMake} // <-- value is "index"
  onChange={this.handleMake}
>
  {makes.map((make, index) => (
    <MenuItem key={index} value={index}> // <-- pass index as "value"
      {make.name}
    </MenuItem>
  ))}
</Select>
  

Для обработки с помощью selectedMake , например, if selectedMake === 0 :

 makes[selectedMake] // { name: "Honda", id: "5de9c553bce4b703a335c204"}
  

Пример компонента

 function App() {
  const [selectedMake, setSelectedMake] = useState(-1);

  const changeHandler = (e) => setSelectedMake(e.target.value);

  useEffect(() => {
    console.log(selectedMake, makes[selectedMake]);
  }, [selectedMake]);

  return (
    <div className="App">
      <select value={selectedMake} onChange={changeHandler}>
        <option disabled value={-1}>
          Make
        </option>
        {makes.map((make, i) => (
          <option key={make.id} value={i}>
            {make.name}
          </option>
        ))}
      </select>
    </div>
  );
}