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

Question

[depsotr]

Добрый день изучаю 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>
        );
    }
}

Comments

[Never Ever]

код в теги

[depsotr]

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

[Never Ever]

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 (





);
}
}

Answer 1

[McBernar]

Ну пост-то оформите нормально. Вы бы еще скриншот кода приложили.

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

Comments

[depsotr]

Постоянно ошибки выдает

[McBernar]

depsotr, а об ошибках мы как должны догадаться?

[depsotr]

McBernar,

render() {
        char = this.state.person.map(results => (
            results.name))

        return (
            <div>
                <h1>
                 {char}
                </h1>
            </div>
        );
    }

может тут я туплю
я, уже все что можно перепробовал , бывает пишет просто TypeError: Cannot read property 'map' of null

[Егор Живагин]

depsotr,

render() {
        return (
            <div>
                <h1>
                 { this.state.person.map(results => results.name) }
                </h1>
            </div>
        );
    }

[Егор Живагин]

depsotr, при объявлении стейта укажите person = [], а не null . Не надо менять типы данных там, где можно этого не делать. И перестанут ошибки сыпаться

[depsotr]

Егор Живагин, Спасибо

[McBernar]

У вас всегда должен быть один корневой тег. Вы пытаетесь вернуть список элементов без корня.

Оберните конструкцию в div или просто в пустые стрелки <>< />

[depsotr]

McBernar,

render() {

            const shar = this.state.person.map(results => results.name)
        return (
            <div>
               <ul>
                  <li>
                  { this.char }
                  </li> 
               </ul>
                   
                
            </div>
        );
    }

А, так что не правильно ?

[McBernar]

depsotr, а так неправильно.
Вы делаете рендер div за div, не имея корневого элемента.
Div
Div
Div

Вам, кстати, не нужен тут const в принципе. Делайте map без присвоения.

И в стрелочной функции вы пишете results, что по смыслу неверно. Это не имеет значения для работы программы, но просто по-человечески это неправильно — в стрелку прилетает один result, после чего происходит возврат result.name.

[depsotr]

McBernar, Попробовал по разному , но так и не понял , что вы имеете в виду , код от Егор Живагин
работает, но все в одну линию , я думаю ка кто же можно деструктурировать что бы было просто { name } и в том же списки вывести все аккуратно , а не в одну строку

Answer 2

[Егор Живагин]

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

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

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

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