React MultiSelect无法正常工作

Question

问题是，当 MultiSelect 不为空，被调用的函数将在 filterOptions 阁下 MultiSelect 一直在执行 Http 里面的调用。

import MultiSelect from "react-multi-select-component";
...


const [invoices,set_invoices] = useState([]);
const [selected, setSelected] = useState([]);

function test(options, filter) {
    if (!filter) {
        return options;
    }
    var data={'invoice_number':'22'}
    axios.post('http://localhost:4000/get_invoice_by_number',data).then(
        response => {
            /* Matching the array elements to be like {lable:'',value:''} */
            var temp_invoices=[];
            for(var i =0;i<response.data.length;i++){
                temp_invoices.push({
                    label:response.data[i].invoice_number,
                    value:response.data[i].invoice_number
                })
            }
            /* This is updating the list with response.data that is coming from the API */
            set_invoices(temp_invoices);
            console.log('FIRED')

        },error =>{
            console.log(error);
        }
    )
    return options;

}


<MultiSelect
    options={invoices}
    value={selected}
    labelledBy={"Select"}
    onChange={setSelected}
    filterOptions={test}
/>

当我在输入中输入一个字母的时候，控制台的日志就会显示出这样的情况。

我试着去掉 set_invoices(temp_invoices); 来自 test function 并试图输入它只显示 FIRED 两次，而且只有在打字的时候才会出现。

我从几个小时开始就一直卡在这上面，也没有弄清楚问题所在。非常感谢任何帮助。

Answer 1

你正在设置状态 set_invoices(temp_invoices); 在你 test 函数，这将导致重新渲染，并使 test 函数再次执行(再执行......)，导致无限循环。

还有 react-multi-select-component 库不支持异步过滤。如果要让它工作的话，那就太麻烦了(挖掘源代码，调整它等等)。

相反，你可以考虑使用 反应-选择 AsyncSelect

Answer 2

我用的是 Ant Select 而不是 MultiSelect 它有一个非常清晰的文档，并且易于使用。我强烈推荐它。