获取并处理api数据后如何在功能组件react环境中调用return()？答案

【问题标题】：How to call the return () in functional component react environment after fetching and procesing api data?获取并处理api数据后如何在功能组件react环境中调用return()？
【发布时间】：2021-09-14 22:57:51
【问题描述】：

 * eslint-disable react/display-name */
  import React, { useEffect } from "react";
  import axios from "axios";
  import TableLayout from "../../reusable/TableLayout";

  const Platforms = () => {

  let usersData = [];
  let platform_data;

  useEffect(() => {

     const getData = async () => {
     const getPlData = await getPlatformData();
     createPlatformArray(getPlData);

  };

  getData();

  // eslint-disable-next-line react-hooks/exhaustive-deps

  }, []);



    const getPlatformData = async () => {

      if (JSON.parse(localStorage.getItem("loginData"))) {

          let access_token = JSON.parse(localStorage.getItem("loginData")).access_token;



         let config = {
           method: "get",
           url: "api_url",
           headers: {
             Authorization: "xxxxx",
           },
         };           


         platform_data = await axios(config)
                      .then(function (response) {
                       console.log(JSON.stringify(response.data));
                       return response.data.data;
                       })
                     .catch(function (data) {
                      console.log(data);
                    });

                  return platform_data;
                 }
               };


       const createPlatformArray= (getPlData) => {

        // eslint-disable-next-line react/prop-types

          if (getPlData !== undefined) {

            usersData = getPlData.map((item) => {

                  return {
                            id: item.id,
                            platform: item.platform,
                            apiSignature: item.apiSignature,
                            environment: item.environment,
                            created_at: item.created_at, 
                        };
                      });
                    }
                  };

           return (
                   <>
                      {usersData && usersData.length > 0 ? (

                        <TableLayout
                         table_name="Platforms"
                         btn_name="Create Platform"
                         data={usersData}
                         fieldkeys={[
                         "id",
                         "Platform",
                         "apiSignature",
                         "environment",
                         "created_at",
                         "Edit",
                       ]}

                       editLink="appstore-cms"
                       deleteLink=""

                      />
                    ) : null}
               </>
             );
           };

     export default Platforms;

一旦我获取并处理了 api 数据，我才想调用/允许 return () 执行。到目前为止，我能够完美地从 api 获取和处理数据，直到方法：createPlatformArray() 但之后 return () 不会被调用，或者说它在 api 调用之前被调用。

即使在使用 async await 之后，我也无法获得我想要的流程。我需要的是首先获取和处理 api 数据，然后才渲染或执行组件平台底部提到的 return()。

【问题讨论】：

这并不是它在 React 中的工作方式。组件将始终先渲染（返回 HTML），然后您可以获取数据、更新状态并重新渲染。
为了配合@Andy 的评论，您需要将所有获取的数据保存到状态中，或触发状态更新，以触发重新渲染。
React 是 designed to flow a certain way。试图与之抗衡会导致你痛苦。

标签： javascript reactjs return use-effect core-ui

【解决方案1】：

UsersData 应该是一个状态。

Const [usersData, setusersData] = useState([])

当您想为该状态分配一个新值时，您需要使用

setusersData(New value)

我想这已经足够了，因为 useEffect 乍一看似乎是对的

【讨论】：