Question

因此，我有渲染组件的路线：

const Layout = () => {

  return (
    <InitLayout>
      <Switch>
        <Redirect exact from='/' to='/home/recent' />
        <Route path="/home/:category" exact component={Home}></Route>
        <Route path="/about" exact component={About}></Route>
        <Route path="/help" exact component={Help}></Route>
        <Route path="/users/:userId" exact component={UserProfile}></Route>
        <Route path="/ask" exact component={AskQuestion}></Route>
        <Route path="/review" exact component={ReviewPost}></Route>
        <Route path="/posts/:postId/review" exact component={ReviewPost}></Route>
        <Route path="/users/:userId" exact component={UserProfile}></Route>

        <Redirect from='*' to='/home/recent' />
      </Switch>
    </InitLayout>
  );
};

从理论上讲，在任何这些组件中，我都会设置以下效果：

  useEffect(() => {
    if (!isSsr) {
      fetchPosts();
    }
    setSsrState({ isSsr: false }); // ==> Here 
  }, []);

该代码基本上将设置一个SSR状态，以防止客户端从服务器重新加载数据后再次向服务器请求数据。

现在需要从任何组件中设置此状态，但是我不想在所有组件中重复此代码。忘记使用它会导致错误，因此绝对不是一个好主意。

是否有一种直接定义效果的简单方法，并且可以在路线的每个组件中调用它？

Answer 1

与Trace交谈后，可以通过使用HOC包装布局组件来解决此问题，该HOC将SSR状态设置为false。

有趣的是，通过将组件包装在HOC中，这首先在HOC组件之前启动了子组件。这样，我们可以首先检查子组件级别是否设置了SSR。在运行子组件useEffect之后，然后将运行HOC useEffect，这会将SSR标志设置回false。

呈现任何组件后，只有一个useEffect钩子

1 个答案: