如何在页面呈现之前填充我的 const？答案

【问题标题】：How to populate my const before the page renders?如何在页面呈现之前填充我的 const？
【发布时间】：2022-01-05 03:00:33
【问题描述】：

我是 ReactJS 开发的新手，今天我尝试使用 Axios 从 API 获取一些数据。我的问题是：

我正在尝试在resultData 上解映射函数以获取我想要的内容，但出现了一个错误并显示：resultData.map is not a function
如果我注释这部分代码并首先呈现页面，然后取消注释，它会起作用并显示数据。

我假设在渲染过程结束之前没有加载数据，这就是我得到这个的原因。但是如何让它之前加载呢？

这是我的代码 sn-ps ：

import React, { useState, useEffect } from "react";
import "./App.css";
import axios from "axios";

const Url = "someAPi";

function App() {
  const [baseData, setBaseData] = useState({});
  const [resultData, setResultData] = useState({});

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

  const getBaseDataWithAxios = async () => {
    const response = await axios.get(Url);
    setBaseData(response.data);
  };

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

  const getResultDataWithAxios = async () => {
    const response = await axios.get(Url);
    setResultData(response.data.result);

  };

  const listItems =  
    resultData.map((d) => <li key={d.value}>{d.value}</li>);

  return (
    <div className="App">
      <header className="App-header">
        <h2>generated fees</h2>
      </header>
      <div className="info-container">
        <h5 className="info-item">{baseData.status}</h5>
        <h5 className="info-item">{baseData.message}</h5>
          <h5 className="info-item">{listItems[1]}</h5>        
      </div>
    </div>
  );
}

export default App;

这个错误被抛出：

  const listItems =  
    resultData.map((d) => <li key={d.value}>{d.value}</li>);

我知道我的数据可以读取，因为如果我评论 listItems 和返回中的显示部分，渲染页面，取消注释所有内容，它会正确显示数据。

有人可以先向我解释一下如何填充数据吗？在我的研究中，我发现这可以通过使用 Axios 来实现。

非常感谢！

【问题讨论】：

resultData 是一个数组吗？可以分享一下样品吗resultData。
在数据加载时显示加载器，以简单的方式使用条件>（如果结果数据最初为假，则使用另一个）。或者您可以设置另一个状态来显示数据是否已加载。此外，如果您在某些东西上使用地图，它必须是数组。所以你可以将初始状态设置为空数组，当数据到来时它必须是数组 {data ? : }

标签： reactjs api axios

【解决方案1】：

渲染周期中的useEffect 钩子always runs after your component function returns。

尝试使用空数组作为初始值 resultData，而不是空对象：

const [resultData, setResultData] = useState([]);

非数组对象上没有map 内置方法，因此在第一次执行期间，您会收到该错误。

【讨论】：

伙计，谢谢！很逻辑...