React-状态挂钩图不是函数

Question

我知道也有类似的问题，但我无法找出错误发生的原因。 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
}

错误：

Answer 1

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

Answer 2

这里需要一个数组才能映射。 => setPlanetas（planetas）。

Answer 3

您拥有planetas状态，它是array数据类型，但是当您更新planetas状态时，您在响应数组外部使用花括号更新了状态，即setPlanetas({ planetas })而不是{{1 }}。

setPlanetas(planetas)