时间戳

首页 > 解决方案 > 从 API 获取数据：避免多次调用

reactjs - 从 API 获取数据：避免多次调用

问题描述

我正在编写一个教程，其中我正在尝试使用 Django 后端和 React 前端构建一个类似 twitter 的应用程序。我正在遵循教程步骤，但尝试使用钩子和上下文 api 实现我的解决方案。

我被困在一个地方。所以在主页上，当说访客用户访问该网站时，我想显示所有推文。但是在个人资料页面上，我只想显示特定用户的推文。我正在使用 react-router 从 URL 中获取用户名。

我面临的问题是，在第二条路线上，即使用用户名的路线上，正在对后端进行 2 个 api 调用。一个是第一次创建推文上下文时，第二个是设置用户名时。正因为如此，由于这两个调用都是对后端进行的，所以无论哪个调用稍后由后端完成，都会在屏幕上呈现。理想情况下，我只想在设置用户名后才在此路由上进行呼叫。

如何避免这些多次调用？

这是带有我的代码的沙箱链接：

https://codesandbox.io/s/tender-pascal-tbf0s

实际代码可能无法在另一台机器上运行，因为 API 不在任何地方托管，它们仅在我的本地机器上。但我希望有人能找出问题并提供解决方案。

提前致谢！

标签： reactjsreact-routerreact-hooksreact-context

解决方案

先说说你的问题吧。在您的代码中，您有两个上下文是“用户”和“推文”上下文。调用 API 是一个异步事件，这就是为什么你永远不知道应该先返回哪个 API。在您的情况下，假设我们有两个 API“用户 API”和“推文 API”。

目前在您的代码中，您在“用户上下文”和“推文上下文”之间没有任何约束。

“理想情况下，我只想在设置用户名后才在这条路线上拨打电话。” => 从这一点开始，您可以考虑在调用“tweet API”之前进行检查。

我们可以有一些方法取决于你：

  • 对于该特定页面（仅以该页面为例），在render函数中，无论何时返回null都TweetsComponent没有user设置。这使得，无论何时user设置，它都会重新渲染TweetsComponent组件。之后应该调用“Tweet API”。
  • 自定义您的“tweet API”调用以检查是否在特定页面中，user首先获取，然后调用它。基本上和上面一样的流程。

我的第一种方法的示例代码：

const { setUsername } = useUserValue();

  const { username } = props.match.params;

  useEffect(() => {
    setUsername(username);
  }, [setUsername, username]);


  return (
    <div className="App">
      {username ? <TweetsComponent /> : null}
    </div>
  );

推荐阅读