为什么我的OnChange函数没有记录我点击的第一个值，而是在第二次点击后才开始记录

Question

我正在我的react应用程序中开发一个组件，该组件允许用户在下拉列表中选择多种食物。我遇到了一个问题，我选择的第一个食物被记录为一个空数组，所以之后我选择的每个食物都会延迟一个食物。例如，假设我从下拉列表中选择的第一种食物是"；Fries"；，那么console.log(foods(将记录一个空数组。如果我选择的第二项是"；Burgers"；，则控制台将记录[Frees]。如果我选择的第三项是"；沙拉"；，则控制台将记录[薯条，汉堡]。我很困，所以任何帮助都将不胜感激！

这是在下拉菜单上调用手柄更改功能的地方：

<Select
className={classes.dropDownMenu}
options={listItems}
onChange={value => handleChange(value)}
/>

这是我在下拉菜单上处理更改的功能：

const [foods, setFoods] = React.useState([])
const handleChange = value => {
setFoods(prev => [...prev, value])
console.log(foods)
}

Answer 1

你有没有试过像这样通过食物的设置状态。。。

const handleChange = value => {
setFoods(() => [...foods, value])
console.log(foods)
}

应该使用原始数据，并通过将原始状态扩展到数组中并添加从Select组件传入的值来向状态添加新数据。