React - 自动完成调用 API

Question

我正在使用 Material UI 自动完成组件在返回 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自动完成的属性，并将其连接到执行 API 调用并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([]);
  }
};

onInputChangegetData(value)如果用户输入了某些内容，将执行 HTTP 请求 ( )。如果字符串为空（即用户已删除他们键入的文本），它将默认为options空数组。在此函数中，value是用户输入的字符串。

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

请参阅此 CodeSandbox以获取工作演示。