组件在useEffect完成之前点击了重定向

Question

我有一个useEffect设置在端点上运行取回，并根据它取回的数据，我想要么显示我的组件，要么重定向到其他地方。

我发现的问题是，在我的useEffect完成之前，代码正在运行，所以我总是被重定向…

我还能做些什么来达到预期的效果吗?

const myComp = () => {
useEffect(() => {
/* 
* I will do my API call here which will set my 
* variables 'isLoading' and 'myLoadedConditional' via redux
*/
}, []);
if (isLoading) return <h1>Still loading</h1>
return myLoadedConditional
? <MyComponent />
: <Redirect to={`/some-link`} />
}

Answer 1

useEffect是在渲染后运行的，所以在你当前的代码中，如果myloaddconditional为false，那么它将始终使用Redirect组件

Answer 2

您需要添加一个本地loading state，默认设置为true，然后调用您的api调用并检查isLoading和myLoadedConditional或设置它们