Отображение в браузере массива объектов из API с помощью ax ios в React - PullRequest
Новая
       20

Отображение в браузере массива объектов из API с помощью ax ios в React

0 голосов
/ 04 мая 2020

Я пытаюсь записать массив объектов, содержащих имена из запроса 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>
        )
    }
}


´´´

Ответы [ 3 ]

0 голосов
/ 04 мая 2020

Если вам нужны только имена, вы можете сохранить их как строки в вашем массиве: 

const names = response.data.results.map(obj => obj.name);
this.setState( { peopleList: names })

Затем вы можете отобразить их, используя карту: 

{this.state.peopleList.map((name, i) => <li key={i}>{name}</li>)}

Каждый сгенерированный элемент по карте нужен уникальный key, здесь я использую второй параметр карты, который является индексом человека в массиве

0 голосов
/ 04 мая 2020

Пожалуйста, проверьте полный пример: 

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;
0 голосов
/ 04 мая 2020 
componentDidMount() {
    const baseUrl = 'https://swapi.dev/api/';
    axios.get(baseUrl + 'people')
    .then(response => {
        this.setState({peopleList: response.data });
    });
}

Проверьте ваш метод componentDidMount (). работает нормально.

...