React应用程序，API调用，为应用程序获取路由

Question

你好，我使用的是react和redux，我有我的动作创建者，它获取页面的路由，我用这种方式创建路由：

首先，在app.js中，im在UseEffect中调用动作创建者(使用mapDispatchToProps(，并将结果(mapStateToProp(传递给Routes组件：

useEffect(() => {
fetchMenu();
}, []);
<Routes menu={menu} />

然后在Routes.js:

{menu.map((item) => (
<PrivateRoute
key={item.id}
exact
path={item.link}
parentClass="theme-1"
component={(props) => selectPage(item.linkText, props)}
/>
))}

问题是，如果我刷新页面，在api调用和页面呈现之间会有一点延迟，所以浏览器会在一秒钟内显示"；未找到页面"；然后立即重定向到该路线。我怎样才能使它正常工作？非常感谢。

Answer 1

基本上，您想要的是能够知道数据尚未加载，并基于此进行不同的渲染。一个简单的检查是查看menu是否为空。类似这样的东西：

export const Menu = ({ menu, fetchMenu }) => {
useEffect(() => {
fetchMenu();
}, []);
if ( menu.length > 0 ) {
return <Routes menu={menu} />
} else {
return <MenuLoading />
}
}

更高级的设置将能够区分由于API错误导致的空菜单和由于仍在加载而空菜单之间的区别，但要做到这一点，您需要存储有关API调用在该状态下的状态的信息。