React 多选不能传递选中的数据，而是传递所有的数据

Question

我正在使用 @kenshooui/react-multi-select 的 react-multiselect，在 DOC 中，示例是一个基于类的组件，但我在我的 JS 代码中使用了基于函数的组件。多选代码是 <MultiSelect  items={form.states}  selectedItems={form.selectedItems}  onChange={handleChange} />在这方面，我在函数 handleChange 中遇到了问题。我试图将函数从基于类更改为基于函数，但它不起作用文档中的函数是：    this.setState({ selectedItems });  }在这个函数中selectedItems，所有在前端选择的项目都会改变状态。我用这个尝试的是：const handleChange = (selectedItems)=> {        setForm.selectedItems=selectedItems;        console.log(selectedItems, "selectedItemsssssss");    };同时我也有一个 handleInputChange 函数：const handleInputChange = (event) => {        const target = event.target;        const value = target.type === 'checkbox' ? target.checked : target.value;        const name = target.name;        setForm({            ...form,            [name]: value,        });    };请帮我解决一下这个。如何更改 selectedItems 的状态并将数据发送到后端。我是新来的反应。

Answer 1

setForm是一个返回的 setter 函数，useState它应该采用您的新状态。在您的情况下，您正在尝试将属性分配selectedItems给此函数：

const handleChange = (selectedItems) => {

  setForm.selectedItems=selectedItems;

};

您应该改为使用更新后的状态调用该函数：

const handleChange = selectedItems => {

  setForm({ ...form, selectedItems });

};