Fix .map не является функцией в функциональном компоненте

Question

У меня есть текстовое поле, в котором я устанавливаю элементы массива в текстовое поле, и я использую его как раскрывающийся список. Мой код работает, и я могу видеть элементы в раскрывающемся списке, однако, когда я нажимаю на любой другой элемент, кроме первого элемента, я получаю ошибку groups.map не является функцией. Я устанавливаю массив из API для своих групп и затем пытаюсь отобразить нужные элементы в текстовое поле. Пожалуйста, посмотрите мой код ниже и помогите мне исправить его.

Я установил здесь свой пустой массив

const [groups, setGroups] = useState([]);

const handleChange = event => {
setGroups({
  ...groups,
  [event.target.name]: event.target.value
});
};

Я обрабатываю мой вызов API здесь

axios
  .post('http://', formData, config)
  .then((response) => {
    console.log(response.data)
    setGroups(response.data);
  })
  .catch((error) => {
    console.log(error.response);
  });
}, []);

Я рендеринг с моими данными, чтобы показать в раскрывающемся здесь

          <TextField
              fullWidth
              label="Select Group"
              margin="dense"
              name="groups"
              onChange={handleChange}
              required
              select
              // eslint-disable-next-line react/jsx-sort-props
              SelectProps={{ native: true }}
              value={groups.name}
              variant="outlined"
            >
              {groups.map(option => (
                <option
                  key={option.id}
                >
                  {option.name}
                </option>
              ))}
            </TextField>

Answer 1

Попробуйте добавить новую переменную состояния для сохранения выбранной группы.

const [selected, setSelected] = useState();

Ваша функция handleChange станет похожей на

const handleChange = event => {
  setSelected(event.target.value);
};

И для вашего компонента TextField его значение будет изменено на сопоставьте соответствующую переменную состояния:

            <TextField
              fullWidth
              label="Select Group"
              margin="dense"
              name="groups"
              onChange={handleChange}
              required
              select
              // eslint-disable-next-line react/jsx-sort-props
              SelectProps={{ native: true }}
              value={selected}
              variant="outlined"
            >
              {groups.map(option => (
                <option
                  key={option.id}
                >
                  {option.name}
                </option>
              ))}
            </TextField>

Answer 2

Это потому, что топор ios не выполнен с запросом, а ваше состояние еще не обновлено, когда вы пытаетесь отобразить свое состояние. Попробуйте этот фрагмент кода рядом с картой:

{groups && groups.map(option => (
     <option
      key={option.id}
     >
       {option.name}
     </option>
 ))}

Карта будет go над массивом, только если groups существует