React - State Hook 中的 map 不是一个函数。

Question

我知道有类似的问题，但我找不出错误发生的原因。Div 显示出来，但然后应用程序崩溃了（就像是某种长度问题）。

代码与我找到的示例相似，比如这个沙盒。

我做错了什么？

这是组件：

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
}

错误:

- nanquim

---

map 是数组函数而不是 object。我认为你的 planetas 是对象。 - Kaushik

如果您正在从其他API获取您的“planetas”，则请使用“{planetas && planetas.map((planeta, key) => {”来检查并等待直到获得“planetas”的值。 - Shubham Tiwari

Answer 1

在这行代码中，你正在将状态设置为具有 planetas 属性的对象，而你需要执行 setPlanetas(planetas)。请注意保留原来的HTML标记。

- Prithwee Das

Answer 2

你有一个名为planetas的状态，它是一个数组数据类型，但当你更新planetas状态时，你使用花括号包裹响应数组来更新状态，即使用setPlanetas({ planetas })而不是setPlanetas(planetas)。

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

- iambinodstha

Answer 3

我曾经遇到过类似的问题，我使用了以下方法：

Object.values(array).map()

这对我很有效，希望能帮助其他人。

- M. Henrique

---

你的答案也是正确的，但是加上一些关于代码正在做什么的解释会很有帮助并且是一个好习惯。 - Sagar Darekar

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

Answer 4

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

- Minh Kha