我应该怎么做才能成功映射来自 axios API 的数据？答案

【问题标题】：What should I do to successfully map data from axios API?我应该怎么做才能成功映射来自 axios API 的数据？
【发布时间】：2021-04-27 11:54:04
【问题描述】：

如何映射出我放入控制台/状态的数据？我一直在尝试在我离开“//m”的地方添加一个地图功能，它似乎应该很简单，但我似乎无法正确地做到这一点。

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

 function App() {
    const [employees, setEmployees] = useState([]);
    const [loading, setLoading] = useState(false);
    useEffect(() => {
                       setLoading(true);
                       axios.get("https://randomuser.me/api/?results=10&nat=us")
                            .then(res => { 
                                            console.log(res.data.results);
                                            setEmployees(...res.data.results);
                                            setLoading(false);
                                         })
                            .catch(err => {
                                            console.log(err);
                                          });
                    }, []); 
        
return ( 
  <div className="App"> 
  <h1>Employee List</h1>  
  //m
  </div>
);
}
export default App;

我能够使用我引用的 youtube 视频中的那个人使用的 API（“https://restcountries.eu/rest/v2/all”）通过以下功能实现它：

   {countries.map((country) => (
<div key={country.name}> 
{country.name} - {country-capital}
</div> 
))}

我只是在使用自己的 API 时遇到问题。

【问题讨论】：

标签： reactjs rest axios mapping

【解决方案1】：

从您的问题看来，您正在寻找从 API 调用呈现输出数据表。

当您调用setEmployees() 时，React 应用程序将使用虚拟 DOM 刷新页面，因为您正在使用 react hooks 机制设置状态。

return(){
   <div className="App"> 
      <h1>Employee List</h1>  
         <table>
           <thead>
              // your table headers
           </thead>
           <tbody>
                 {this.employees.map((item, index) => {
                                                       <tr>
                                                          <td>{item.value1}</td>
                                                          <td>{item.value2}</td>
                                                          // as per your requirement
                                                       </tr>  
                                                      })}
           </tbody>
         </table>       
  </div>
}

您可以做的另一件事是，创建一个函数并从函数返回 JSX。

请访问以下链接以创建函数并返回 JSX。

How to loop and render elements in React.js without an array of objects to map?

【讨论】：

【解决方案2】：

您可以随意使用地图。

return ( 
  <div className="App"> 
    <h1>Employee List</h1>  
    <ul>
      {
        emplyees.map((employee) =>
          <li>{employee.name}</li>
        );
      }
    </ul>
  </div>
);

有详细的文档，可以一步一步来here

【讨论】：