reactjs - bootstrap dualbox 中的选定选项对于动态值正在消失

Question

我有这个反应代码：

import DualListBox from 'react-dual-listbox';
const ProjectTest = props => {
    const [options, setOptions] = useState([]);
    const [selectedOptions, setSelectedOptions] = useState([]);
    const onChangeDualBox = (selected) => {
        setSelectedOptions(selected);
    };
    const setCategory = (cat) => {
        if(cat !== 'all'){
            const found = allOptions.filter(el => el.category === cat);
            setOptions(found);
        }
        else{
            setOptions(allOptions);
        }
    }
    const allOptions = [
        { value: '1', label: 'One', category: "premier" },
        { value: '2', label: 'Two', category: "premier"  },
        { value: '3', label: 'Three', category: "laliga"  },
        { value: '4', label: 'Four', category: "laliga"  },
        { value: '5', label: 'Five', category: "seriea"  },
        { value: '6', label: 'Six', category: "seriea"  },
    ];
    const categories = ["premier", "laliga", "seriea"];
    useEffect(() => {
        setOptions(allOptions);
    }, []);

    return (
        <div>
            <select onChange={e => setCategory(e.target.value)} >
                <option value="all">
                    Select
                </option>
                {categories && categories.map((item, index) => (
                    <option key={index}>
                        {item}
                    </option>
                ))}
            </select>
        </div>
        <div className="row paddingBottom20">
            <DualListBox
                options={options}
                onChange={onChangeDualBox}
                selected={selectedOptions}
                canFilter={true}
            />
        </div>
    )
}

从一开始，左框显示所有值（一到六）。如果我选择“一”然后单击箭头按钮，则“一”从左侧框中消失并出现在右侧框中。

现在，如果我使用选择来更改类别（我选择“laliga”），那么左边的框将只包含“三”和“四”。哪个是对的。但问题是右边的盒子会被清空。如何强制右框累积所有选定的值？我可以看到“selectedOptions”仍然包含累积的选定值。但是没有在正确的框中显示它。我错过了什么？

标签： reactjstwitter-bootstrapreact-bootstrap