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

Question

我正在使用 Material UI Select 组件呈现一个简单的下拉菜单，其值作为使用 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 方法不仅仅更新状态。我知道 hooks 中的 setstate 方法工作得很好，因为它的异步性质，但在某些时候它应该正确显示。不明白我哪里错了。

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

Answer 1

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

Answer 2

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

class 组件示例：

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

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

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

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

React Hooks SetState Method isn't updating the state at all

setstate

reactjs

react-hooks

class 组件示例：

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