我想从 api 获取数据（姓名和电子邮件）。 我的程序已成功编译，但我在控制台中遇到错误。 https://randomuser.me/api

Question

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

function App() {

  const [ data, setData ] = useState([]);

  useEffect(  ()=> {
    loadData();
    //getData();
  }, []);

  const loadData = async () => {
    await fetch("https://randomuser.me/api")
    .then(response => response.json())
    .then(receiveddata => setData(receiveddata));
  }

  console.log(data);

  return (
    <div className="App">
      <p> Fetch/ Async/ Await</p>
      {data.map(user => (
        <div key={user.id}>{user.name}, {user.email}</div>
      ))}
    </div>
  );
}

export default App;

我在控制台上收到此错误，

未捕获的类型错误：data.map 不是函数

Answer 1

您收到错误是因为data不是数组。 您得到的响应是一个具有两个属性results和info的对象。 由于您的状态是一个数组，请将状态设置为receiveddata.results 。

Answer 2

Firsteval，你的console.log(data)不会返回任何内容，因为当你的代码运行console.log()时状态不会更新； 所以不要指望得到调试信息。

接下来，您的响应是一个object ，而不是一个array 。 你可以这样做： setData(receiveddata.results)然后你可以 map() 你的数据。

在您的渲染中，您还应该像这样检查地图是否不为空：

  {data && data.map(user => (
    <div key={user.id}>{user.name}, {user.email}</div>
  ))}

Answer 3

您需要检查来自您的 API 的数据结构。 您的数组位于"results"属性内。 "title"也是一个对象。 您可以在此处CodeSandbox找到您的代码的工作示例。 检查控制台，您将更好地了解响应的结构

Answer 4

您收到此错误是因为您将data视为数组，而它包含一个对象，这是API在本例中返回的内容。

考虑您从API返回的数据架构，类似于下面的内容。 您可以看到results是对象中数组的键：

{ 
  results: [
    {  
      ...
      email: string; 
      id: { 
        name: string; 
        value: string;
      }
      gender: string; 
      name: { 
        title: string;
        first: string; 
        last: string;
      } 
      ...
    } 
} 

因此，要访问first 、 last names 和email属性，您需要在分配给data的对象中的results数组上调用map()方法，如下所示。

确保在尝试使用data.results data.results && data.results.map(..)访问它之前分配了 data.results ：

{
  data.results && data.results.map(user => (
    <div key={user.id.value}>
      {user.name.first}, {user.name.last}, {user.email}
    </div>)) 
}