在句柄更改函式中使用useEffect獲取API

我正在使用 YTS API，我需要更改呼叫的鏈接，我必須使用 ?query_term=并添加用戶正在輸入的文本，以便自動完成。我正在使用 mantine 組件進行自動完成。我嘗試將呼叫放在 handlechange 函式中，但這是不可能的。

const [movieNames, setMovieNames] = useState([])

const onChangeHandler = (text) => {
    useEffect(() => {
        const loadMovieNames = async () => {
            const response = await axios.get('https://yts.mx/api/v2/list_movies.json?query_term=' text);
            let arrayOfMoviesNames = [];

            response.data.data.movies.forEach(i => {
                arrayOfMoviesNames.push(i.title)
            });
            setMovieNames(arrayOfMoviesNames)
        }
        loadMovieNames()
    }, [])
}

.

<Autocomplete
         placeholder="Search Movie"
         limit={8}
         data={movieNames}
         onChange={e => onChangeHandler(e.target.value)}
/>

uj5u.com熱心網友回復：

你必須在函陣列件的執行背景關系中使用鉤子，你使用的useEffect是函式內部而不是函陣列件的執行背景關系。

const YourComponent = () => {
  const [movieNames, setMovieNames] = useState([]);
  
  const loadMovieNames = async (text) => {
    const response = await axios.get(
      'https://yts.mx/api/v2/list_movies.json?query_term='   text
    );
    let arrayOfMoviesNames = [];
  
    response.data.data.movies.forEach((i) => {
      arrayOfMoviesNames.push(i.title);
    });
    setMovieNames(arrayOfMoviesNames);
  };


  return (
    <Autocomplete
      placeholder="Search Movie"
      limit={8}
      data={movieNames}
      onChange={(e) => loadMovieNames(e.target.value)}
    />
  );
};

uj5u.com熱心網友回復：

也可以不使用，因此無需使用和兩者都useEffect使其變得如此復雜，只使用函式來更新，它會自動更新 DOM 文本（我的意思是你使用過的地方）......useEffectonChangeHandleronChangeHandlermovieNames

import React, { useState } from "react";

function MoviesPage(props) {
  const [ movieNames, setMovieNames ] = useState([]);
  const [ searchValue, setSearchValue ] = useState("");

  const onChangeHandler = async (text) => {
    const response = await axios.get(
      'https://yts.mx/api/v2/list_movies.json?query_term='   text
    );

    let arrayOfMoviesNames = [];

    response.data.data.movies.forEach(i => {
      arrayOfMoviesNames.push(i.title)
    });
    
    setMovieNames(arrayOfMoviesNames);
  }

  return (
    <div>
      <Autocomplete
        placeholder="Search Movie"
        limit={8}
        data={movieNames}
        onChange={(e) => onChangeHandler(e.target.value)}
      />
    </div>
  );
}

export default MoviesPage;

...并且澄清一下useEffect，如果您想使用 API 資料初始化頁面，您可以使用 API。如果你沒有任何onChange處理程式，你可以使用這個鉤子。您可以處理的另一種方法是您可以searchData在搜索欄的更改上更新狀態掛鉤（如 ），最后將searchData變數添加到useEffect依賴項陣列中：

useEffect(() => {
  // use the searchData variable to populate or update the page
  // ...
},
[
  searchData, // <-- talking about this line
]);

所以，這是我的解決方案。希望這對你有幫助！

uj5u.com熱心網友回復：

useEffect 是一個鉤子，它在狀態更改時執行，因此將 useEffect 函式保留在 onChangeHandler 之外，并在 onChangeHandler 中為 'query param' 和 setQueryState(text) 添加一個新狀態，并將狀態引數作為依賴項放在 useEffect 中，所以無論何時這個狀態被改變了，這將自動呼叫使用效果函式。

uj5u.com熱心網友回復：

不使用 useEffect() 試試

標籤：javascript 反应 api

上一篇：快速錯誤：_型別的值沒有成員_

下一篇：回圈訪問API呼叫函式的多個URL