Блог

Я использую компонент выбора пользовательского интерфейса 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 будет обновлен новым значением, когда пользователь выберет новое значение.

не используйте функцию стрелки с onchange, она часто используется, когда нам нужно передать идентификатор или некоторые другие данные

вы должны определить новое state для хранения выбранного элемента.

Пример для компонента класса:

   state = {
    selectedOption: null,
  };
  handleChange = selectedOption => {
    this.setState({ selectedOption });
  };
 

Пример для функционального компонента(с использованием React-hook):

 const [selectedOption, setSelectedOption] = useState(null);
  handleChange = selectedOption => {
    setSelectedOption(selectedOption);
  };