[过滤react-multi-select时如何向服务器打电话

Question

每次用户输入Multiselect输入以基于搜索查询检索数据时，我都需要向服务器发出请求。

如果我将列表设置为固定值，则可以正常工作并过滤列表。

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


const options = [
    { label: "Grapes 🍇", value: "grapes" },
    { label: "Mango 🥭", value: "mango" },
    { label: "Strawberry 🍓", value: "strawberry" },
];

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

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

我试图在filterOptions上使用props MultiSelect。问题是，当我按下MultiSelect并开始输入输入时，它会不断向服务器发出呼叫，直到我清除MultiSelect输入的值为止。它停止了。

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 => {
            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
                })
            }
            // JSON.stringify(temp_invoices)
            set_invoices(temp_invoices);

        },error =>{
            Swal.fire({
                title: 'Error!',
                text: 'Please Contact your software developer',
                icon: 'error',
                confirmButtonText: 'OK'
            })
        }
    )
    return options;
}

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

Answer 1

您可以使用filterOptions道具MultiSelect组件。当用户在Multiselect输入中键入内容时，将触发在props中传递的功能。

但是onChange仅在选择选项时才会触发。

import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";

const Example: React.FC = () => {
  const options = [];
  const [selected, setSelected] = useState([]);

  const handleChange = e => {
   // Triggered for option select
  }
  function filterOptions(options, filter) {
    // Triggered for filter input changes
  }

  return (
    <div>
      <pre>{JSON.stringify(selected)}</pre>
      <MultiSelect
        options={options}
        value={selected}
        onChange={handleChange}
        labelledBy={"Select"}
        filterOptions={filterOptions}
      />
    </div>
  );
};

export default Example;