javascript - 在 React 中使用 axios 在浏览器中显示来自 api 的对象数组

Question

我试图在我的屏幕上写出一个包含来自 api 请求的名称的对象数组，但我不知道如何正确地做到这一点。我是新来的反应。这是 obj 数组的外观https://gyazo.com/82359c12374294d95c1d8d83b70c2e56

'''

import React from 'react';
import axios from 'axios';

export default class List extends React.Component{
    state = {
        peopleList: []
    }

    componentDidMount() {
        const baseUrl = 'https://swapi.dev/api/';

        axios.get(baseUrl + 'people')
        .then(response => {
            console.log("axios response: ", response.data)
            const names = response.data.results.map(obj => ({ name: obj.name}));
            this.setState( {names})
        })
}

    render(){
        return(
            <main>   
                <h1>Names: </h1>
                    <ul>
                        {this.state.peopleList.map(person => <li key="person">{person.name}</li>)}
                    </ul>
            </main>
        )
    }
}


´´´

标签： javascriptarraysreactjsapiaxios

Answer 1

请检查完整的示例：

import React, {useEffect, useState} from "react";
import axios from 'axios';

function PostListPage() {
    const [posts, setPost] = useState([]);
    let signal = axios.CancelToken.source();

    useEffect(() => {
        let isSubscribed = true;
        axios.get('https://jsonplaceholder.typicode.com/posts', {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        });
        return function cleanup() {
            isSubscribed = false;
            signal.cancel('Api is being canceled');
        }
    }, []);

    return (
        <React.Fragment>
            <ul>
                {
                    posts.map(post => <li key={post.id}>{post.title}</li>)
                }
            </ul>
        </React.Fragment>
    );
}
export default PostListPage;