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

Question

depsotr @depsotr

React

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>
        );
    }
}

Вопрос задан более трёх лет назад
784 просмотра

4 комментария

Подписаться 1 Простой 4 комментария

Never Ever @Target1

код в теги

Написано более трёх лет назад
depsotr @depsotr Автор вопроса

Never Ever, Это что такое ?

Написано более трёх лет назад
Never Ever @Target1

depsotr, вот

Написано более трёх лет назад

depsotr @depsotr Автор вопроса

Never Ever,

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 (





);
}
}

Написано более трёх лет назад

Never Ever,
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 ( ); } }

Answer 1 · 2020-02-20 16:59:36

Мне кажется, вы плохо понимаете, что вообще делаете. В доках реакта есть целая статья про вывод списков - ознакомьтесь

Вы сейчас берёте и "говорите" Реакту: отрисуй мне массив внутри блока .
Это условно аналогично такому коду:

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>
        );
    }

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

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

Войдите на сайт