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

Question

I'm having issues with loading data into the React functional component from API ( getAllUsers() is using the AXIOS library to call PHP rest APIs) on initial load. On 2nd load, it's working. See the attached image.

How can I modify it to load data on the initial load?

Here is the component code snippets:

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

Answer 1

you need to call setState to show render the data on-screen;

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