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

Question

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

Когда я console.log данные в моей визуализации функции я получаю 2 результаты:

• Undefined
• объект (который является один мне нужно, так это один идеально)

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

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

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

Heres мой 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> 
) 
} 

Answer 1

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

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

Объяснение

Каждый раз, когда изменяется состояние, повторно вынести будет срабатывать. В первый раз ваш компонент сконструирован с помощью this.state.movie = []. После этого запускается компонентDidMount(), который изменяет ваше состояние. Это вызывает второй метод рендеринга.