Javascript 我应该在哪里声明useCallback函数？。该函数可在每次渲染时更改useEffect挂钩的依赖项

我试图在

useffect

中添加异步函数。在执行此操作时，我收到了关于

useCallback

hook中wrap

fetchData

函数的警告。那么，我应该在哪里声明

useCallback

函数，以及如何实现它

代码如下：

---

警告是关于在每个渲染周期重新声明

fetchData

，从而重新触发

useffect

回调。

useCallback

会记忆函数以提供稳定的引用

您有两个选择：

用

useCallback

const fetchData = useCallback(async () => {
  try {
    const data = await fetch(
      `https://pixabay.com/api/?key=${process.env.REACT_APP_PIXABAY_API_KEY}&q=${serachTerm}&image_type=photo&pretty=true`
    ).then((res) => res.json());
    setImages(data.hits);
  } catch (err) {
    console.log(err);
  } finally {
    setIsLoading(false); // <-- set loading false when done no matter what
  }
}, [serachTerm]); // <-- add any missing dependencies react warns about

useEffect(() => {
  fetchData();
  setIsLoading(true); // <-- I think you meant for loading true
}, [setSearchTerm, fetchData]); // <-- double check setSearchTerm dependency

---

你在哪里调用

useCallback

？@prathami太棒了！如果我的回答有助于解决你的问题，那么请考虑接受它。如果解释和解决方案有帮助，那么也请投票。干杯

const fetchData = useCallback(async () => {
  try {
    const data = await fetch(
      `https://pixabay.com/api/?key=${process.env.REACT_APP_PIXABAY_API_KEY}&q=${serachTerm}&image_type=photo&pretty=true`
    ).then((res) => res.json());
    setImages(data.hits);
  } catch (err) {
    console.log(err);
  } finally {
    setIsLoading(false); // <-- set loading false when done no matter what
  }
}, [serachTerm]); // <-- add any missing dependencies react warns about

useEffect(() => {
  fetchData();
  setIsLoading(true); // <-- I think you meant for loading true
}, [setSearchTerm, fetchData]); // <-- double check setSearchTerm dependency

useEffect(() => {
  const fetchData = async () => {
    try {
      const data = await fetch(
        `https://pixabay.com/api/?key=${process.env.REACT_APP_PIXABAY_API_KEY}&q=${serachTerm}&image_type=photo&pretty=true`
      ).then((res) => res.json());
      setImages(data.hits);
    } catch (err) {
      console.log(err);
    } finally {
      setIsLoading(false);
    }
  };

  fetchData();
  setIsLoading(true);
}, [setSearchTerm]);