React - State Hook 映射不是函数

React - State Hook map is not a function

我知道有类似的问题,但我找不到错误发生的原因。 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
}

错误:

setPlanetas({ planetas }) 在此行中,您将状态设置为具有 planetas 属性 的对象,而您需要执行 setPlanetas(planetas)

这里需要一个数组来映射。 => setPlanetas(行星).

你有 planetas 状态,它是 array 数据类型,但是当你更新 planetas 状态时,你用响应数组外的花括号更新了状态,即 setPlanetas({ planetas }) 而不是 setPlanetas(planetas).

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

我遇到了类似的问题,我使用了:

Object.values(array).map()

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