如何防止每个组件在获取道具之前渲染？答案

【问题标题】：How to prevent every component from rendering until it's props are fetched?如何防止每个组件在获取道具之前渲染？
【发布时间】：2020-05-07 04:56:19
【问题描述】：

我有许多组件在加载获取数据时，我不想在获取数据之前显示它们，因为它们需要对代码进行许多检查，例如检查数据是否存在然后显示它等等..和如果我只在 fetch 之后渲染我的组件，我就不需要所有这些检查

我已经尝试并完成的事情是（让我们以这个组件为例）

1.检查用户是否被获取，只有在显示数据之后

 const Private = ({ user, getUserDetails }) => {
  useEffect(() => {
    getUserDetails ();
  }, []);

  if (!isAuth()) return <Redirect to='/signin' />;
  return (
    <div>
     {user && <h1>Hello {user.name}</h1>}
    </div>
  );
};

export default connect((state) => ({ user: state.auth.user }), {
  getUserDetails,
})(Private);

如果用户不存在，返回 null / 空 div

    const Private = ({ user, getUserDetails }) => {
      useEffect(() => {
        getUserDetails ();
      }, []);

      if (!isAuth()) return <Redirect to='/signin' />;
      if (isAuth() && !user) return null;
      return (
        <div>
         {user && <h1>Hello {user.name}</h1>}
        </div>
      );
    };

    export default connect((state) => ({ user: state.auth.user }), {
      getUserDetails,
    })(Private);

现在两种方法都可以，但我不想对每个组件都这样做，我将有许多组件需要不同的获取数据，必须有一个全局解决方案来做到这一点吗？

希望任何人都可以帮助我并理解我:) 对不起我的英语不好。

【问题讨论】：

您可以创建一个 hoc: const withUser = Component => props => props.user? <Component {...props} /> : null 并通过 withUser(Private) 进行连接
谢谢，我已经考虑过了，但是我会有很多组件，每个组件都需要不同类型的获取道具，所以我应该为所有组件制作一堆 HOC 吗？ @HMR

标签： reactjs

【解决方案1】：

您可以使用loading 属性，您将在上次请求中更改该属性，因此您可以知道您已完成所有需要的请求。

async function getUserData() { //just for the example
  const request = await fetch('http://example.com/user', {
     method: "GET",
  });

  return await request.json();
}

在你的组件中你可以拥有这个。

const [state, setState] = useState({
   loading: true,
   user: false
});

useEffect(() => {
   getUserData().then((result) => {
       setState({
          loading: false,
          user: result
       })
   })
})

if (state.loading) {
  return null;
}

【讨论】：