Question

我有许多组件在加载时会提取数据，并且在提取数据之前我不希望显示它们，因为它们需要对代码进行很多检查，例如检查数据是否存在然后再显示等等，等等。如果我仅在提取之后才渲染组件，则不需要所有这些检查

我已经尝试过并做过的事情（以这个组件为例）

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);

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

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

Answer 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;
}

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

1 个答案: