是否可以在初始安装组件之前用 API 数据初始化组件的状态？

Question

在我的 React 应用程序中，我想使用 API 数据初始化我的组件的状态。一种可行的方法是在 useEffect() 中进行 API 调用，然后在 API 调用之后设置状态，但这会在组件初始安装之后发生。

我只是想知道是否有其他方法可以在组件初始挂载之前初始化状态？这是我尝试过的方法，但它不起作用。

async function getAns() {
    let output = [];
    //make api calls and assign data to output
    //.......
    return output;
  };

const [playersList, setPlayersList] = useState(getAns());

非常感谢您的建议！

Answer 1

您可以将 async-await 与您的函数一起使用，并且仅当状态具有来自您的 API 调用的响应数据时才加载组件。

import React,{useState, useEffect} from 'react';

const Component = () => {
  const [playerList, setPlayerList] = useState();

 async function getAns(){

   let output = await //make api calls and assign data to output
    
   return setPlayerList(output);

  };

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

return (
  {playerList && (
    // Component jsx elements
)}
)
}

export default Component;

是否可以在初始安装组件之前用 API 数据初始化组件的状态？

Is it possible to initialize the state of a component with API data before the initial mounting of the component?

reactjs

react-state-management