我正在编写一个教程，其中我试图用Django后端和React前端构建一个类似twitter的应用程序。我遵循教程中的步骤，但尝试使用钩子和上下文api来实现我的解决方案。
有一个地方我被卡住了。所以在主页上，当有访客访问网站时，我想显示所有推文。但在个人资料页面上，我只想显示特定用户的推文。我正在使用react路由器从URL中获取用户名。
我面临的问题是，在第二条路由上，即使用用户名的路由上，有两个api调用正在进行到后端。一个是首次创建tweets上下文时，另一个是设置用户名时。正因为如此，由于这两个调用都是对后端进行的，因此后端稍后完成的任何调用都会在屏幕上呈现。理想情况下，我只想在设置好用户名后才在此路由上进行呼叫。
如何避免这些多次通话？
这是我的代码到沙箱的链接：
https://codesandbox.io/s/tender-pascal-tbf0s
实际的代码可能不会在另一台机器上运行，因为API不在任何地方托管，它们只在我的本地机器上。但我希望有人能发现问题并提供解决方案。
提前感谢！
让我们先谈谈您的问题。在您的代码中，您有两个上下文：；用户"；以及"；"推特"；上下文。调用API是一个异步事件，这就是为什么您永远不知道应该首先返回哪个API。在你的情况下，假设我们有两个API"；用户API"；以及"；推特API"；。
目前在您的代码中，您在"；用户上下文"；以及"；推特上下文"；。
"理想情况下，我只想在设置好用户名后才在此路由上进行呼叫">从这一点上讲，你可以考虑在"；推特API"；被调用。
我们可以有一些方法取决于您：
- 对于该特定页面(仅限于该页面(，在
render函数中，只要未设置user，就为TweetsComponent返回null。这使得无论何时设置了user，它都会重新渲染TweetsComponent组件"Tweet API"；之后应该调用 - 自定义您的"推特API"；调用以检查是否在特定页面中，先获取
user，然后调用它。基本上与上面的流程相同
我的第一种方法的示例代码：
const { setUsername } = useUserValue();
const { username } = props.match.params;
useEffect(() => {
setUsername(username);
}, [setUsername, username]);
return (
<div className="App">
{username ? <TweetsComponent /> : null}
</div>
);