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}
/>

В console.log это видно, когда я просто набираю одну букву во вводе

Я пытался удалить set_invoices(temp_invoices); из test function и попытаться ввести, он показал только FIRED два раза и только при вводе.

Я застрял на этом несколько часов и не выяснил проблему. Любая помощь приветствуется.

Answer 1

Вы устанавливаете состояние set_invoices(temp_invoices); в своей функции test, что вызовет повторную визуализацию, и функция test выполняется снова (и снова ...), что приводит к бесконечному l oop.

Кроме того, библиотека react-multi-select-component не поддерживает асинхронную c фильтрацию. Это будет слишком много работы / взлома, чтобы заставить его работать (покопаться в исходном коде, настроить его и т. Д. c).

Вместо этого вы можете использовать response-select AsyncSelect

Answer 2

Я использовал Ant Select вместо MultiSelect, который имеет очень понятную документацию и с ней легко работать. Настоятельно рекомендую.