在 handle change 函数中使用 useEffect 获取 API

Question

我正在使用 YTS API，我需要更改 link 来调用，我必须使用 ?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)}
/>

Answer 1

您必须在函数组件的执行上下文中使用挂钩，您在函数内部使用了 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={(value) => loadMovieNames(value)}
    />
  );
};

Answer 2

useEffect 是一个钩子，它在状态变化时执行，所以将 useEffect 函数保留在 onChangeHandler 之外，并在 onChangeHandler 内为 'query param' 和 setQueryState(text) 添加一个新状态，并将状态参数设置为useEffect 中的依赖项，因此每当此状态发生更改时，都会自动调用使用效果函数。

Answer 3

不用useEffect也是可以的，所以不用把useEffect和onChangeHandler都用的那么复杂，只用onChangeHandler函数更新movieNames 它会自动更新 DOM 文本（我的意思是你在哪里使用过）...

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;

...澄清一下，如果您想使用 API 数据初始化页面，则可以在 API 的情况下使用 useEffect。如果您没有任何 onChange 处理程序，则可以使用此挂钩。另一种方法是在搜索栏发生变化时更新状态挂钩（如 searchData），最后将 searchData 变量添加到 useEffect 依赖项数组：

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

所以，这就是我的解决方案。希望这对你有帮助！

在 handle change 函数中使用 useEffect 获取 API

Getting API with useEffect, inside a handle change function

javascript

api

reactjs

mantine