React и Axios срабатывает дважды (один раз неопределенный, один раз успешно)

следуя примеру React AJAX, я создал файл JSX, целью которого является извлечение и визуализация фильма. Насколько я знаю, я делаю все прямо здесь.

когда я консоль.войти в функцию render, я получаю 2 результата:

  • неопределено
  • объект (который мне нужен, так что этот идеальный)

Как я могу отфильтровать неопределенную строку, не выполняя логику if/else в моей функции рендеринга? Перебора результат, конечно же, приведет к ошибке в первый раз, что приведет к сбою моего приложения.

каков наилучший способ справиться с этим?

EDIT: возможно, приложение отображается до вызова Axios, и в этом случае я вынужден сделать оператор if/else?

вот мой файл JSX:

import React from "react";
import axios from "axios";

export default class NetflixHero extends React.Component {
 constructor() {
    super();
    this.state = {
      movie: []
    }
 }
}

componentDidMount() {
  const apiKey = '87dfa1c669eea853da609d4968d294be';
  let requestUrl = 'https://api.themoviedb.org/3/' + this.props.apiAction + '&api_key=' + apiKey;
  axios.get(requestUrl).then(response => {
      this.setState({movie: response.data.results})
  });
}

render() {
  //Fires twice. Returns Undefined and an Object
  console.log(this.state.movie[0]);
  return(
   <div></div>
  )
}
7
axios javascript reactjs

1 ответов

проверьте состояние внутри метода render. При таком подходе вы можете отобразить экран загрузки:

import React from "react";
import axios from "axios";

export default class NetflixHero extends React.Component {
 constructor() {
    super();
    this.state = {
      movie: []
    }
 }
}

componentDidMount() {
  const apiKey = '87dfa1c669eea853da609d4968d294be';
  let requestUrl = 'https://api.themoviedb.org/3/' + this.props.apiAction + '&api_key=' + apiKey;
  axios.get(requestUrl).then(response => {
      this.setState({movie: response.data.results})
  });
}

render() {
  //Loading...
  if( this.state.movie[0] === undefined ) {
      return <div>Loading...</div>
  }

  //Loaded successfully...
  return(
   <div> Movie loaded... [Do action here] </div>
  )
}

объяснение

каждый раз при изменении состояния будет запускаться повторная визуализация. В первый раз, ваш компонент построен с этим.государство.кино.][ = После этого запускается componentDidMount (), который изменяет ваше состояние. Это запускает метод render во второй раз.

8