自动完成调用API

Question

我使用Material自动完成组件在返回JSON的方法中进行API调用。这样做的想法是，当用户在自动完成组件中输入时，它会发出一个调用，以找到与字符串匹配的结果。

我所放的代码的问题是，我不知道如何在自动完成组件中调用API并返回结果

const [itemsAutocomplete, setItemsAutocomplete] = useState([])

 <Autocomplete
     disablePortal
     id="autocomplete-search"
     onChange={handleItemsOptions}
     getOptionLabel={option => option.name}
     sx={{ width: 300 }}
     renderInput={params => (
     <TextField {...params} label="Search an item..." />
     )}
     />



const handleItemsOptions = event => {

    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            name : search_name,
        }),
    }

   
    fetch(
        `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/product/items/search/`,
        requestOptions,
    )
        .then(response => response.json())
        .then(json => setItemsAutocomplete(json))
}

Answer 1

如果希望每次用户键入搜索框时更新选项，则可以使用自动完成的onInputChange属性，并将其挂接到执行options调用并根据结果更新options的函数。

<Autocomplete
        id="combo-box-demo"
        options={options}
        onInputChange={onInputChange}
        getOptionLabel={(option) => option.title}
        style={{ width: 300 }}
        renderInput={(params) => (
          <TextField {...params} label="Combo box" variant="outlined" />
        )}
      />

Javascript

const [options, setOptions] = useState([]);
const previousController = useRef();

const getData = (searchTerm) => {
  if (previousController.current) {
    previousController.current.abort();
  }
  const controller = new AbortController();
  const signal = controller.signal;
  previousController.current = controller;
  fetch("https://dummyjson.com/products/search?q=" + searchTerm, {
    signal,
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json"
    }
  })
    .then(function (response) {
      return response.json();
    })
    .then(function (myJson) {
      console.log(
        "search term: " + searchTerm + ", results: ",
        myJson.products
      );
      const updatedOptions = myJson.products.map((p) => {
        return { title: p.title };
      });
      setOptions(updatedOptions);
    });
};

const onInputChange = (event, value, reason) => {
  if (value) {
    getData(value);
  } else {
    setOptions([]);
  }
};

如果用户输入了某些内容，onInputChange将执行HTTP (getData(value))。如果字符串是空的(即用户已经删除了他们输入的文本)，它将将options默认为空数组。在这个函数中，value是用户输入的字符串。

getData执行HTTP请求，并调用setOptions根据返回的结果更新自动完成选项。AbortController的用途是确保当用户键入(或删除)一个字符并发出下一个HTTP请求时，取消以前的HTTP请求。这是因为根据API的速度，请求可能不会按照发送的顺序返回。

有关工作演示，请参见这个CodeSandbox。