时间戳

首页 > 解决方案 > 如何在 React 中使用 fetch API 正确实现地图功能？

reactjs - 如何在 React 中使用 fetch API 正确实现地图功能？

问题描述

我正在尝试将获取的数据插入到地图函数中，该函数返回每个员工的姓名

，但我收到一个错误，上面写着“data.map 不是函数”。我该如何解决这个问题>

import React, { useState, useEffect } from "react";

//const data = [{id:1,employee_name:"Tiger Nixon",employee_salary:320800,employee_age:61,profile_image:""},{id:2,employee_name:"Garrett Winters",employee_salary:170750,employee_age:63,profile_image:""}]

export default function App() {
 const [data, setData] = useState([]);
  useEffect(() => {
    fetch("https://dummy.restapiexample.com/api/v1/employees")
      .then(response => response.json())
      .then(result => setData(result))
  },[]);
  const information = data.map((item,i) => {
    return (<h1> item.employee_name </h1>);

  })
  return (
    <div className="App">
      <h1> {information} </h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

标签： reactjs

解决方案

打开链接https://dummy.restapiexample.com/api/v1/employees（你在哪里获取数据）

请注意，它返回一个对象而不是一个数组。该对象包含status（字符串）、data（数组）和message（字符串）。这data是您希望保存的部分。现在您正在保存整个对象，因此.map不是一个函数。

有 2 种方法可以修复它。

第一次只保存data到你的状态

  useEffect(() => {
    fetch("https://dummy.restapiexample.com/api/v1/employees")
      .then(response => response.json())
      .then(result => setData(result.data || []))
  },[]);

注意添加[]确保 ifdata为 null - 该数组将存在，因此.map不会引发错误。

或者将你的状态模型切换到一个对象const [data, setData] = useState(null);并像这样渲染

  const information = data?.data?.map((item,i) => {
    return (<h1> item.employee_name </h1>);
  })

注意 using?.只是一个if它不存在的 IF。如果data?值为.data。?.map如果有.data一个方法.map。如果其中任何一个返回 false - 整个事情都返回 null。

建议坚持第一种方式。但取决于你

推荐阅读