React实现multiselect dropdown遇TypeError：状态设置失败求助

错误原因 #

你写的Checkbox是函数组件，但误用了类组件的this.state语法——函数组件没有this上下文，this的值是undefined，所以执行this.state = {...}时就会抛出Cannot set properties of undefined的错误。

修正后的Checkbox组件代码 #

import React, { useState, useEffect } from 'react';
import Multiselect from 'multiselect-react-dropdown';

// 接收父组件传递的props
function Checkbox({ selectedOptions, setSelectedOptions }) {
    // 用useState定义本地选项状态（后续从API获取时替换初始值）
    const [options, setOptions] = useState([
        { name: 'Option 1', id: 1 }, 
        { name: 'Option 2', id: 2 }
    ]);

    // 后续从API获取选项的示例（可选）
    useEffect(() => {
        // 替换为实际API地址
        fetch('你的选项API接口')
            .then(res => res.json())
            .then(data => setOptions(data))
            .catch(err => console.error('获取选项失败:', err));
    }, []);

    // 处理多选框的选中/取消选中事件
    const handleSelectChange = (selectedList) => {
        setSelectedOptions(selectedList);
    };

    return (
        <Multiselect
            options={options}
            selectedValues={selectedOptions}
            displayValue="name"
            onSelect={handleSelectChange}
            onRemove={handleSelectChange}
        />
    );
}

export default Checkbox;

关键修正点 #

• 用useState替代this.state：函数组件必须通过React的useState钩子管理内部状态，这是函数组件的标准状态管理方式。
• 接收父组件props：LotList已经给Checkbox传递了selectedOptions和setSelectedOptions，需要在Checkbox的参数中接收这些props，实现父子组件状态同步。
• 配置Multiselect回调：multiselect-react-dropdown通过onSelect和onRemove事件通知选中值变化，需要把这些变化同步到父组件的状态中。

后续API适配说明 #

上面代码已经包含了useEffect获取API数据的示例，只需替换fetch的接口地址，确保返回的数据结构和options一致（包含name字段，因为配置了displayValue="name"）即可。

内容的提问来源于stack exchange，提问作者shizz