У меня есть текстовое поле, в котором я устанавливаю элементы массива в текстовое поле, и я использую его как раскрывающийся список. Мой код работает, и я могу видеть элементы в раскрывающемся списке, однако, когда я нажимаю на любой другой элемент, кроме первого элемента, я получаю ошибку 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>