Question

我正在尝试使用react从“人”那里获取SWAPI数据。我最终希望检索数据，然后设置人员并从第1页的10个人中创建一张卡。当我console.log我的响应时，我能够看到返回的对象。我正在尝试使用response.data.results（应包含人员）进行设置。

//full code:

import React, { useState, useEffect } from 'react';
import axios from "axios";
import Cards from "./components/Card"

function People() {

    const [people, setPeople] = useState([]);

    useEffect(() => {
        axios.get('https://swapi.co/api/people/')
            .then(res => {
                //console.log(res);
                setPeople(res.data.results)
            })
            .catch(err => {
                console.log(`Data not received ${err}`)
            })
    }, [])

    return (
        <div className = "container">
            {people.map((name, index) => {
                return <Cards name={name} index={index}/>
            })}
        </div>     
    )
}

导出默认人员；

使用setswPeople后当我console.log swPeople时，我返回一个空数组。

关于为什么集合没有给我一个包含第1页上的10个人的数组的想法？

Answer 1

我认为它可以正常工作https://codesandbox.io/s/react-hooks-useeffect-frhmn

设置状态需要花费一些时间，如果我们不将第二个参数[]传递给useEffect，您将看到它正确返回了数据，但这会导致无限循环，因此我们避免了这种情况

Answer 2

import React, { useState, useEffect } from 'react';
import axios from "axios";
import Cards from "./components/Card"

function People() {

const [people, setPeople] = useState([]);

useEffect(() => {
    axios.get('https://swapi.co/api/people/')
        .then(res => {
            //console.log(res);
            setPeople(res.data.results)
        })
        .catch(err => {
            console.log(`Data not received ${err}`)
        })
}, [])

return (
    <div className = "container">
        {people.map((name, index) => {
            return <Cards name={name} index={index}/>
        })}
    </div>     
)
}

毕竟这看起来很奏效，但是我花了将近30秒钟才能看到该信息已登录到控制台并且我很不耐烦

React中的SWAPI请求

2 个答案: