React - 状态挂钩映射不是函数答案

【问题标题】：React - State Hook map is not a functionReact - 状态挂钩映射不是函数
【发布时间】：2019-07-12 05:25:44
【问题描述】：

我知道有类似的问题，但我无法找出错误发生的原因。 Div 显示，但随后应用程序崩溃（好像是一些长度问题）

代码和我找到的例子类似，比如sandbox

我做错了什么？

这是组件：

import React, { useState, useEffect } from 'react'
/* import Button from '../Button' */
import { getPlanets } from '../../services/index'
import './Planetas.css'


const Planetas = () => {

    const [planetas, setPlanetas] = useState([]);

    useEffect(() => {
        const fetchPlanetas = async () => {
            const planetas = await getPlanets()
            setPlanetas({ planetas })
        };    
        fetchPlanetas()
    }, []);


    return (
      <div className="planetas">
      {
        planetas.map((planeta, key) => {
            return <div key={key}>{planeta.name}</div>
        })
      }
      </div>
    )
}

export default Planetas

这是 api 服务：

import axios from 'axios'

const BASE_URL = 'https://swapi.co/api/planets'

export const getPlanets = async() => {
    const planets = await axios.get(`${BASE_URL}`).catch((e) => {
        console.error(e);
    })
    console.log('resp\n')
    console.log(planets.data.results)

    return planets.data.results
}

错误：

【问题讨论】：

map 是数组函数而不是 object。我认为你的planetas 是对象。
正在从其他 api 获取您的 planetas，如果是，则使用 {planetas && planetas.map((planeta, key) => { 来检查并等到你得到行星的价值

标签： reactjs react-hooks react-state

【解决方案1】：

setPlanetas({ planetas }) 在这一行中，您将状态设置为具有 planetas 属性的对象，而不是您需要执行 setPlanetas(planetas)

【讨论】：

【解决方案2】：

您有 planetas 状态，这是 array 数据类型，但是当您更新 planetas 状态时，您使用响应数组外部的大括号更新状态，即 setPlanetas({ planetas }) 而不是 setPlanetas(planetas)。

useEffect(() => {
        const fetchPlanetas = async () => {
            const planetas = await getPlanets()
            setPlanetas(planetas) // remove curly braces here
        };    
        fetchPlanetas()
    }, []);

【讨论】：

【解决方案3】：

这里需要一个数组来映射。 => setPlanetas（行星）。

【讨论】：

【解决方案4】：

我遇到了类似的问题，我用过：

Object.values(array).map()

它对我有用。我希望能帮助别人。

【讨论】：

你的回答也是正确的，但是添加一些关于代码在做什么的解释会很有帮助，也是很好的做法。
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。