#reactjs #react-hooks #setstate
Вопрос:
Я использую компонент выбора пользовательского интерфейса Material для отображения простого выпадающего меню, значение которого в качестве состояния объявляется с помощью метода useState.
const [collaboratingTeams, setCollaboratingTeams] = useState([])
Приведенный ниже код относится к компоненту Select, с его значением и соответствующей функцией обработчика в его реквизите onChange.
<Select
validators={["required"]}
errorMessages={["this field is required"]}
select
multiple
variant="outlined"
value={collaboratingTeams}
name="collaboratingTeams"
onChange={(e) => handleSelectCollaboratingTeams(e)}
helperText="Select Collaborating Teams amp;nbsp; amp;nbsp;"
>
{arrTeams.map((option, index) => (
<MenuItem
key={option.teamId}
value={option.teamId}
variant="outlined"
>
<Checkbox
checked={collaboratingTeams.indexOf(option.teamId) !== -1}
/>
<ListItemText primary={option.teamValue} />
</MenuItem>
))}
</Select>
Приведенный ниже код-это функция, которая запускается при изменении выпадающих данных.
Эта функция задает состояние, которое затем должно технически обновить выбранные параметры Select.
const handleSelectCollaboratingTeams =(e)=>{
setCollaboratingTeams(e.target.value)
}
Проблема в том, что метод setCollaboratingTeams обновляет не только состояние. Я понимаю, что метод setstate в hooks работает так из-за его асинхронной природы, но в какой-то момент он должен отображаться правильно. Не понимаю, в чем я ошибаюсь.
Я ожидаю, что массив collaboratingTeams будет обновлен новым значением, когда пользователь выберет новое значение.
Комментарии:
1. у меня такое чувство, что интерфейс этого выбора-нет
e
. Можешь поставить консоль. войти внутрьhandleSelectCollaboratingTeams
?
Ответ №1:
не используйте функцию стрелки с onchange, она часто используется, когда нам нужно передать идентификатор или некоторые другие данные
Ответ №2:
вы должны определить новое state
для хранения выбранного элемента.
Пример для компонента класса:
state = {
selectedOption: null,
};
handleChange = selectedOption => {
this.setState({ selectedOption });
};
Пример для функционального компонента(с использованием React-hook):
const [selectedOption, setSelectedOption] = useState(null);
handleChange = selectedOption => {
setSelectedOption(selectedOption);
};