Задать вопрос
@depsotr

React API вывод данных?

Добрый день изучаю React такой вопрос , есть два файла файл 1js формирует запрос к API, файл 2js рендерит на страницу, вывел массив данных в консоль , как их же отрендерить на странице  
1.js
export default class Service {

    _apiBase = 'https://swapi.co/api';
    async getResource(url) {
      const res = await fetch(`${this._apiBase}${url}`);
  
      return await res.json();
    }
  
  async getAllPeople() {
    const res = await this.getResource(`/people/`);
    return res.results
    // .map(results => results.name);
    }
  
  }

2.js
import React, { Component } from 'react';
import Service from './Services';


export default class App extends Component {

    service = new Service();
  

 state = {
     person: null
 }

    componentDidMount() {
        this.service.getAllPeople()
        .then((res) => {
            this.setState({
                person: res,
            })
            console.log(res.map(results => (
                results.name
            )));
        })

        
    }



   

    render() {


        return (
            <div>
                <h1>
                  
                </h1>
            </div>
        );
    }
}
  • Вопрос задан
  • 779 просмотров
Подписаться 1 Простой 4 комментария
Пригласить эксперта
Ответы на вопрос 2
@McBernar
Ну пост-то оформите нормально. Вы бы еще скриншот кода приложили.

У вас в компоненте есть функция render, которая отвечает за рендер элементов. У вас в стейте есть массив person. Делаете map этого массива в рендере и возвращаете нужные элементы. В каком месте у вас проблема?
Ответ написан
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Мне кажется, вы плохо понимаете, что вообще делаете. В доках реакта есть целая статья про вывод списков - ознакомьтесь

Вы сейчас берёте и "говорите" Реакту: отрисуй мне массив внутри блока .
Это условно аналогично такому коду:
var array = [1,2,3];
someElement.innerHTML = array; // Вот что тут выведется? Object object? Строка '[1,2,3]' ? Я хз


Вам нужно делать ваш цикл непосредственно в шаблоне
render() {
        return (
            <div>
                <h1>
                 { this.state.person.map(results => results.name) }
                </h1>
            </div>
        );
    }


Но я, к сожалению, не могу угадать, как вы эти данные хотите вывести. Вам надо, чтоб каждое поле было в теге h1 ? Пожалуйста:
render() {
        return (
            <div>
                 { this.state.person.map(results => (
                      <h1> { results.name } </h1>
                  )
            </div>
        );
    }


Я надеюсь, что логика понятна. Пожалуйста, больше читайте документацию по реакту
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
27 дек. 2024, в 17:43
500 руб./за проект
27 дек. 2024, в 17:36
2000 руб./за проект
27 дек. 2024, в 17:34
1500 руб./за проект