我使用 fetchAPI 和 useState 收到此错误“TypeError：userData.map 不是函数”答案

【问题标题】：I am getting this error "TypeError: userData.map is not a function" using fetchAPI and useState我使用 fetchAPI 和 useState 收到此错误“TypeError：userData.map 不是函数”
【发布时间】：2021-01-13 12:27:15
【问题描述】：

我在尝试从 API 获取数据并显示它们作为回报时遇到错误。我正在使用 useState 和 useEffect。真的，我还是不明白，我正在努力学习并实现这一点。

import React, {useState, useEffect} from 'react'

function About() {
    const [userData, setUserData] = useState(true)
    async function getData() 
        {
           let response = await fetch('https://api.github.com/users');
           let data = await response.json();
            setUserData(data)
            return data;
        }
        //call getData function
        // getData()
        // .then(data => console.log(data)
        // );//
    useEffect(() => {
        getData()
        .then(
           data => {
               setUserData(data) }
        )
    }, [])

    return (
        <div>
           {
             userData.map((item, index) => (
                 <div key={index}>
                     <span>{item.login}</span>
                 </div>
             ))
           }
                 
        </div>
    )
}

我想知道是否有任何材料可以指点我，我已经搜索过，但我看到 setState 是基于类的组件，但我使用的是基于函数的组件

【问题讨论】：

我认为 userData 不是一个数组而是一个对象。你能 consol.log 吗？另外，设置初始状态为空数组，不为真。
哇，谢谢，我已将其更改为数组，现在它显示了。谢谢

标签： reactjs react-hooks

【解决方案1】：

我认为有两个问题。

首先，通过将 state 设置为 true，您无法对其进行映射。换句话说，您正在尝试执行无法在布尔值上执行的 true.map。将状态设置为空数组。

第二次总是检查你得到的数据是不是数组，否则不能使用.map

【讨论】：

我没有检查它是否是自动完成的，我已将其更改为 const [userData, setUserData] = useState([])

【解决方案2】：

你只需要替换这些代码： const [userData, setUserData] = useState(true)

//如果您的响应是数组格式，那么：通过此代码： const [userData, setUserData] = useState([])

//如果您的响应是对象格式，那么：通过此代码： const [userData, setUserData] = useState({})

它对我有用

【讨论】：