Javascript React不会在初始加载时将数据加载到组件中

我在从API将数据加载到React功能组件时遇到问题（

getAllUsers（）

正在使用AXIOS库调用PHP rest API）。在第二次加载时，它正在工作。请参阅附件中的图像

如何修改它以在初始加载时加载数据

以下是组件代码片段：

*****imports******

function Listallusers (props) {
    
    
    const { rootState,getAllUsers } = useContext(MyContext);
    const { isAuth,showLogin } = rootState;
    let [rows] = useState([]);
    const columns = [...];
    

    useEffect(() => {
      const Userdata = async() => {
        const data = await getAllUsers().then(t => { return t });
        for (const [index, value] of data.entries()) {
            rows.push(value);
        }        
      };
      Userdata();
    }, [getAllUsers, rows]);
   
    if(isAuth){
        return (
            <div className="wrapper">                    
                <Header />
                <Sidebar />
                <div className="content-wrapper" style={{ minHeight: '960px' }}>
                    <section className="content">
                        <div className="container-fluid">
                            <div className="card">
                                <div className="card-body">
                                <DataTable
                                    title="Registered Users"
                                    columns={columns}
                                    data={rows}
                                    striped={true}
                                    responsive={true}
                                    pagination={true}
                                />
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <Footer />
            </div>
        ); 
    }
    // Showing Login Or Register Page According to the condition
    else if(showLogin) {
        return <Login/>;
    }
    else {
        return <Register/>;
    }
  }
  
export default Listallusers;

*****进口******
功能列表用户（道具）{
const{rootState，getAllUsers}=useContext（MyContext）；
const{isAuth，showLogin}=rootState；
让[rows]=useState（[]）；
常量列=[…]；
useffect（（）=>{
const Userdata=async（）=>{
const data=await getAllUsers（）。然后（t=>{return t}）；
for（data.entries（）的常量[索引，值]）{
行。推送（值）；
}        
};
用户数据（）；
}，[getAllUsers，行]；
if（isAuth）{
返回(
); 
}
//根据条件显示登录或注册页面
else if（showLogin）{
返回；
}
否则{
返回；
}
}
导出默认列表用户；

您需要调用setState在屏幕上显示渲染数据

useEffect(() => {
  const Userdata = async() => {
    const data = await getAllUsers().then(t => { return t });
    let newRows = [...rows];
    for (const [index, value] of data.entries()) {
      newRows.push(value);
    }  
    setRows(newRows);
  };
  Userdata();
}, [getAllUsers, rows]);

---

在我看来，您是在直接修改

行

状态，而不是使用setState函数，这可能会导致问题。您没有正确更新状态，这可能是问题的原因。您正在直接对

行进行变异。您应该做的是创建一个新数组，将其填充到of

循环的

中，然后将该数组传递给
setRows（…）
函数，您需要从
useState
对其进行分解。还要注意的是，您将
async await
语法与承诺链接混合在一起，
await getAllUsers（）。然后（t=>{return t}）可以是
等待getAllUsers（）@Yousaf谢谢你的建议，它奏效了