反应 .map 不渲染答案

【问题标题】：React .map not rendering反应 .map 不渲染
【发布时间】：2021-06-11 10:32:49
【问题描述】：

我已经完成了一个 API 调用来获取一些数据，然后将其存储在一个数组中并在返回中执行一个 .map

如果你们有任何想法，这是代码，我已经坚持了 2 个小时：(

import {useEffect, useState} from 'react';
import {useParams} from "react-router-dom";
import axios from "axios";


const CharacterScreen = () => {
    const params = useParams()
    const [character, setCharacter] = useState([]);
    const [starships, setStarships] = useState([]);


    useEffect(() => {
        axios.get(`https://swapi.dev/api/people/?search=${params.character}`)
            .then((r) => {
                setCharacter(r.data.results[0])
                getStarships(r.data.results[0])
            })
            .catch((e) => console.log(e))

        const getStarships = (data) => {
            let array = []
            data.starships.forEach(element => {
                axios.get(element)
                    .then((r) => {
                        array.push(r.data)
                    })
                    .catch((e) => console.log(e))
            })
            console.log(array)
            setStarships(array)
        }
    }, []);

    console.log(starships)
    return (
        <div>
            <p>{character.name}</p>
            <p>{character.eye_color}</p>
            <p>{character.birth_year}</p>
            <p>{character.gender}</p>
            <p>{character.created}</p>
            <p>{character.edited}</p>
            {starships.map((element) => {
                console.log('ok')
                return (
                    <p key={element.key}>{element.name}</p>
                )
            })}

        </div>
    )


}

这是星舰的日志：

这是我的回报：

任何帮助将不胜感激

【问题讨论】：

你检查导出 CharacterScreen 了吗？

标签： javascript reactjs array.prototype.map

【解决方案1】：

使用扩展运算符：

useEffect(() => {
        axios.get(`https://swapi.dev/api/people/?search=${params.character}`)
            .then((r) => {
                setCharacter(r.data.results[0])
                getStarships(r.data.results[0])
            })
            .catch((e) => console.log(e))

        const getStarships = (data) => {
            let array = []
            data.starships.forEach(element => {
                axios.get(element)
                    .then((r) => {
                        array.push(r.data)
                    })
                    .catch((e) => console.log(e))
            }) 
            setStarships([...array]) <=== //spread opeator
        }
    }, []);

【讨论】：

我爱你

【解决方案2】：

forEach 中的代码将异步运行。您必须等待所有数据实际填充到您的array 中。 async/await pattern + Promise.all(..) 在这里是一个不错的选择，可以这样做：-

const getStarships = async (data) => {
  let array = await Promise.all(data.starships.map(element => {
    return axios.get(element)
      .then((r) => {
        return r.data
      })
      .catch((e) => console.log(e));
  }))
  setStarships(array);
}

当前在您的代码中，当您执行 setStarships(array) 时，array 将为空，即 []。

检查这个代码框在哪里工作：-

注意：- 不要关注element.replace 代码，那只是为了发出安全请求

【讨论】：

【解决方案3】：

你有一个语法错误，你应该用括号替换你的括号，如下所示：

{starship && starships.map((element) => (//here
                console.log('ok')
                return (
                    <p key={element.key}>{element.name}</p>
                )
            )//and here)}

【讨论】：