Javascript API调用后响应呈现页面

当我在React应用程序中的页面之间导航时，a会在每个页面上看到反弹（这意味着页面首先呈现时没有任何数据[例如用户名、出生日期、图像]，然后几毫秒/秒后，当API请求完成并更新状态时，屏幕上会显示一些详细信息

例如，我有以下几页：

<div className="home" onClick={() => history.push('/')}></div>
<div className="user" onClick={() => history.push('/user')}></div>
<div className="settings" onClick={() => history.push('/settings')}></div>

我想要达到的目标：

---

例如，当我在“主页”上时，单击转到“设置”，仅在API请求完成后导航并呈现设置页面，我可以立即在屏幕上显示所有详细信息。我有一个很好的行加载组件，我希望在加载时在标题中显示该组件。（与YouTube类似，它在导航时会显示一个红色进度条）。我也在这个项目中使用Redux，我认为它可以在这里使用，但我不知道如何使用。请任何人解释一下如何实现这种行为。

嗨，我想你可以使用Promise.all（[]） 和加载状态

const Settings = () => {
 const [userDetails, setUserDetails] = useState(null);
 const [userImages, setUserImages] = useState([]);
 const [loading,setLoading] = useState(false)

 const getUsersInfos = async () => {
  try {
   const result = await new Promise.all([
     getUserSettingsDetails(),
     getUserSettingsImages(),
   ])

   const details = result[0]
   const images = result[1]

   //i'm not sure if we need to test
   if(details.data && images.data){
     setUserDetails(details.data);
     setUserImages(images.data);
     setLoading(true)
   }

  } catch (error) {
   console.log(error);
 }
}

useEffect(() => {
  getUsersInfos();
}, []);

return ( 
  <>
   {loading && (
     ...
   )}
  </>
 );
}

const设置=（）=>{
const[userDetails，setUserDetails]=useState（null）；
const[userImages，setUserImages]=useState（[]）；
常量[loading，setLoading]=useState（false）
const getUsersInfos=async（）=>{
试一试{
const result=等待新的承诺。全部([
getUserSettingsDetails（），
getUserSettingsImages（），
])
const details=结果[0]
常量图像=结果[1]
//我不确定我们是否需要测试
if（details.data&&images.data）{
setUserDetails（details.data）；
setUserImages（images.data）；
设置加载（真）
}
}捕获（错误）{
console.log（错误）；
}
}
useffect（（）=>{
getUsersInfos（）；
}, []);
报税表（
{加载&&(
...
)}
);
}

您可以创建一个名为

isLoading

的额外状态，并在任何数据提取开始时将其设置为true。然后，在wait语句下面，您可以将

isLoading

设置为false

因此，您可以使用JSX代码中的

isLoading

状态来进行条件呈现，例如，您可以在

isLoading

变量的值为true时显示加载组件，然后，当变量为false时，根据需要显示页面

const Settings = () => {
  const [state, setState] = useState({});
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const getAllInformation = async () => {
      // start loading
      setIsLoading(true);
      // make the request here
      const data = await fetch();
      setState({ ...data });
      // already finished here
      setIsLoading(false);
    };
    getAllInformation()
  }, []);

  return (
    <div>
      {isLoading ? (
        <Loading />
      ) : (
        {
          /* MORE CODE */
        }
      )}
    </div>
  );
};

const设置=（）=>{
const[state，setState]=useState（{}）；
const[isLoading，setIsLoading]=useState（false）；
useffect（（）=>{
const getAllInformation=async（）=>{
//开始加载
设置加载（真）；
//在这里提出请求
常量数据=等待获取（）；
设置状态（{…数据}）；
//已经在这里完成了
设置加载（假）；
};
getAllInformation（）
}, []);
返回(
{孤岛加载(
) : (
{
/*更多代码*/
}
)}
);
};

虽然我相信@Daphaz-answer非常好，但我将使用redux-thunk或redux-sagas来使用更好更干净的方法。使用redux，您只能进行简单的同步更新，而在这里您将进行异步更新，因此您将需要像我提到的那样的中间件

有大量的例子说明如何使用这种中间产品来实现您想要的目标

const Settings = () => {
  const [state, setState] = useState({});
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const getAllInformation = async () => {
      // start loading
      setIsLoading(true);
      // make the request here
      const data = await fetch();
      setState({ ...data });
      // already finished here
      setIsLoading(false);
    };
    getAllInformation()
  }, []);

  return (
    <div>
      {isLoading ? (
        <Loading />
      ) : (
        {
          /* MORE CODE */
        }
      )}
    </div>
  );
};