Ошибка реагирования - не удается прочитать свойство 'состояние' из неопределенного

Question

Следую этому уроку по использованию fetch; Я смог вытащить фотографии, используя этот макет API: https://randomuser.me/api/ ... Но изменил код, чтобы вытащить другие данные из API, например. имя. Но в процессе обнаружена ошибка:

вот код:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {

  constructor(){
    super();
    this.state = {
      pictures: [],
      people: [],
    };
  }

  componentWillMount()
  {
    fetch('https://randomuser.me/api/?results=10')
    .then(results => results.json())
    .then(data => this.setState({ pictures: data.results }))
    .then(data => this.setState({ people: data.results }));
  }



    render()  {
      console.log(this.state);
      return (
        <div>
            {
              this.state.pictures.map( pic =>(<div><img src={pic.picture.medium} /></div>) ).
              this.state.people.map(person => (<div>{person.name.first}</div>))
            }    
        </div>
      );
    }
  }

export default App;

По сути, я пытаюсь понять, как вытащить больше, чем просто картинки (другие данные из API), и не был уверен, был ли я на правильном пути. В настоящее время я пытаюсь получить имя. Могу я получить помощь, пожалуйста?

Answer 1

Ответ data.results - это массив объектов, каждый из которых содержит свойство name. Вам нужно изменить функцию рендеринга на отображаемое имя

render()  {
  return (
    <div>
        {
          this.state.pictures.map(item =>(
          <div>
            <img src={item.picture.medium} />
            <div>{item.name.first}</div>
          </div>))
        }    
    </div>
  );
}

Имя pictures, которое вы использовали для сохранения результата, не подходит, пожалуйста, позаботьтесь о наименовании.

Надеюсь, это поможет!

Answer 2

Я не думаю, что имена переменных, которые вы используете, имеют смысл, учитывая, что в ответе API нет ничего под названием pictures или people.

То, что вы хотите сделать, это установить ваши данные в состояние, а затем перебрать их.

Короче, у вас будет что-то вроде этого:

class App extends Component {
  state = { data: [] }

  componentWillMount() {
    fetch('https://randomuser.me/api/?results=10')
      .then(results => results.json())
      .then(data => this.setState({ data: data.results }))
  }

  render() {
    if (!this.state.data) {
      return 'loading'
    }
    console.log(this.state.data)
    return (
      <div>
        {
          this.state.data.map(item => (
            <div>
              <img src={item.picture.medium} />
              <p>{item.name.first}</p>
            </div>
          ))
        }
      </div>
    );
  }
}

export default App;

Вот рабочий пример здесь .

Answer 3

Каждое выражение должно быть заключено в {}.

{this.state.pictures.map(pic => (
  <div>
    <img src={pic.picture.medium} />
  </div>
))}
{this.state.people.map(person => <div>{person.name.first}</div>)}