Question

我正在研究一个教程，其中我试图使用Django后端和React前端构建类似Twitter的应用程序。我正在按照教程中的步骤进行操作，但是尝试使用挂钩和上下文API来实现我的解决方案。

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

我面临的问题是，在第二条路线上，即具有用户名的路线，正在向后端进行2次api调用。一种是第一次创建tweets-context，第二种是设置用户名。因此，由于这两个调用都被后端调用，因此稍后后端实现的任何调用都将呈现在屏幕上。理想情况下，我只想在设置了用户名之后才能在此路由上拨打电话。

如何避免这些多次通话？

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

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

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

谢谢！

Answer 1

首先讨论您的问题。在您的代码中，您有两个上下文：“用户”和“ tweet”上下文。调用API是一个异步事件，这就是为什么您永远不会知道哪个API应该首先返回的原因。就您而言，假设我们有两个API“用户API”和“ tweet API”。

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

“理想情况下，仅在设置用户名后，我才想在此路由上进行呼叫。” =>从这一点上，您可以考虑在调用“ 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>
  );

从API提取数据：避免多次调用

1 个答案: