Question

我已经完成了一个 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>
    )


}

这是星际飞船的日志：

Text

这是我的回报：

Text 任何帮助将不胜感激

Answer 1

forEach 中的代码将异步运行。您必须等待所有这些数据实际填充到您的 array 中。 async/await 模式 + 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 代码，那只是为了发出安全请求

Answer 2

使用展开运算符：

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
        }
    }, []);

Answer 3

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

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

反应 .map 不渲染

3 个答案: