React Hooks SetState 方法根本不更新状态答案

【问题标题】：React Hooks SetState Method isn't updating the state at allReact Hooks SetState 方法根本不更新状态
【发布时间】：2021-11-13 05:45:18
【问题描述】：

我正在使用材质 UI 选择组件来呈现一个简单的下拉菜单，其值是使用 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 &nbsp; &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 方法因其异步性质而工作，但在某些时候它应该正确显示。不明白我哪里出错了。

我希望在用户选择新值时用新值更新 collaboratingTeams 数组。

【问题讨论】：

我有种感觉，这个Select的界面不是e。你能在handleSelectCollaboratingTeams里面放一个console.log吗？

标签： reactjs react-hooks setstate

【解决方案1】：

您应该定义新的state 来存储所选项目。

类组件示例：

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

功能组件示例（使用 React-hook）：

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

【讨论】：

【解决方案2】：

不要使用带有onchange的箭头函数，它通常在我们需要传递id或其他一些数据时使用

【讨论】：