javascript - 使用 useCallback Hook 内存 API 响应

Question

当我点击一个按钮时，我需要在我的 React 项目中获取一个 API，但如果我再次点击它应该不会重做 API 调用，而是检索最新获取的数据。

我知道钩子(Hook)useCallback可以内存功能。所以我只是将我的 API 调用放在 useCallback 中:

  const memoizedApiResponse = React.useCallback(async () => {
    console.log("fetch is called again :(");
    let response = await fetch("https://api.stackexchange.com/2.2/users?order=desc&sort=reputation&site=stackoverflow");

    return await response.text();
  }, []);

所以当我点击按钮时，我只是调用这个内存函数:

import React from "react";

const App = () => {
  const [apiResponse, setApiResponse] = React.useState(undefined);

  const memoizedApiResponse = React.useCallback(async () => {
    console.log("fetch is called again :(");
    let response = await fetch(
      "https://api.stackexchange.com/2.2/users?order=desc&sort=reputation&site=stackoverflow"
    );

    return await response.text();
  }, []);

  const updateApiResult = async () => {
    const apiResponse = await memoizedApiResponse();
    setApiResponse(apiResponse);
  };

  return (
    <div className="App">
      <button onClick={updateApiResult}>fetch API</button>
      <p>{apiResponse}</p>
    </div>
  );
};

export default App;

但遗憾的是每次点击都会发送请求(您可以在控制台中看到消息)。您知道如何使用 useCallback 内存请求响应吗？

这是 codesandbox 的链接.

Answer 1

memoizedApiResponse 不是它的名字所暗示的(内存 API 响应)，它是一个内存函数，可以从应用程序接口(interface)。您只是在为自己节省获取数据的函数的创建时间，而不是实际检索数据的时间。

此外，useCallback 可能不会为您节省太多。我建议你阅读这篇文章:When to useMemo and useCallback它确实有助于理解其中一些内存 Hook 的作用以及它们何时真正帮助您。

我想你想要这个

import React from "react";

const App = () => {
  const [apiResponse, setApiResponse] = React.useState(undefined);
  
  const getData = async () => {
    if (apiResponse) {
      return apiResponse;
    }
  
    const response = await fetch("https://api.stackexchange.com/2.2/users?order=desc&sort=reputation&site=stackoverflow");
    const data = await response.text();
    setApiResponse(data);
  };

  return (
    <div className="App">
      <button onClick={getData}>fetch API</button>
      <p>{apiResponse}</p>
    </div>
  );
};

export default App;