Как получить доступ к значениям состояния по индексу в React - PullRequest
Новая
       15

Как получить доступ к значениям состояния по индексу в React

0 голосов
/ 06 марта 2019

Я пытаюсь получить доступ к значениям внутри состояния в React, используя axios, и мой код выглядит следующим образом: 

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class App extends React.Component {
  state = {
    moviedata:null
  }

  getMovies(){
    axios.get("http://127.0.0.1:8000/api/v1/movies/")
      .then(moviedata => {
        this.setState({
          moviedata: moviedata.data    
        });
      })
      .then(x => { console.log(this.state.moviedata)});
  }

  componentDidMount(){
    this.getMovies();
  }

  render () {
    return <h1>Movie Examples include </h1>
  }
}

ReactDOM.render(<App />, document.getElementById('react-app'));

console.log выглядит так: 

0: {title: "Terminator 2: Judgement Day", plot: "Rise of the machines.", year: 1991}
1: {title: "The Italian Job", plot: "A comic hinging on a traffic jam", year: 1969}

Как включить заголовок первой записи, т. Е. «Терминатор 2: Судный день», внутри тега h1 после слова «включить»?

Я пытался: 

render () {
  return <h1>Movie Examples include {this.state.moviedata[0].title}</h1>
}

и получил ошибку TypeError: Cannot read property '0' of null

Ответы [ 3 ]

1 голос
/ 06 марта 2019

moviedata в состоянии вашего компонента изначально равно null, поэтому попытка доступа к [0] из этого приведет к вашей ошибке.

Вы можете, например, рано вернуться из метода рендеринга до moviedata был установлен.

Пример 

class App extends React.Component {
  // ...

  render() {
    const { moviedata } = this.state;

    if (moviedata === null) {
      return null;
    }
    return <h1>Movie Examples include {moviedata[0].title}</h1>;
  }
}
0 голосов
/ 06 марта 2019

Вы должны учитывать тот факт, что запрос Axios является асинхронным, поэтому компонент может отображаться до загрузки данных. Например: 

render () {
  const data = this.state.moviedata;
  return <h1>Movie Examples include {data ? data[0].title : ""}</h1>
}
0 голосов
/ 06 марта 2019

Во-первых, вы должны «знать», что компонент находится в состоянии «загрузки». Без этого данные о вашем состоянии не определены (все еще загружаются)

Вот как это сделать: 

class App extends React.Component {
  state = {
    moviedata:null,
    isLoading: true
  }

  getMovies(){
    axios.get("http://127.0.0.1:8000/api/v1/movies/")
      .then(moviedata => {
        this.setState({
          moviedata: moviedata.data,
          isLoading: false
        });
      })
      .then(x => { console.log(this.state.moviedata)});
  }

  componentDidMount(){
    this.getMovies();
  }

  render () {
    if (this.state.isLoading) {
      return <h1>Please wait...</h1>
    }

    // show only the first movie
    return <h1>Movie #1 {this.state.moviedata[0].title}</h1>;

    // show all the movies
    return (
      <>
        {this.state.moviedata.map((m, idx) => <h1 key={idx}>Movie: {m.title}</h1>}
      </>);
  }
}
...