ReactJS: Использование состояния вызывает ошибку рендеринга заголовка

Question

console.log() внутри componentDidMount() работает без проблем.Это работает, как и ожидалось, с регистрацией, работающей правильно:

Вот проблема;внутреннее возвращение для App это не позволяет мне отображать <h1>:

  render() {
    return (
      <div className="App">
        <Navbar />,
        <h1>{this.state.users.data[0].images.original.webp}</h1>
      </div>
    );
  }

Этот код, однако, работает без < h1>:

   import React, { Component } from "react";
    import Navbar from "./components/Navbar";
    import "./App.css";
    import axios from "axios";

class App extends Component {
  state = {
    users: [],
    loading: false
  };

  async componentDidMount() {
    this.setState({ loading: true });

    const res = await axios.get(
      "http://api.giphy.com/v1/stickers/search?q=monster&api_key=sIycZNSdH7EiFZYhtXEYRLbCcVmUxm1O"
    );

    this.setState({ users: res.data, loading: false });
    console.log(123);
    console.log(this.state.users.data[0].images.original.webp);
  }

  render() {
    return (
      <div className="App">
        <Navbar />

      </div>
    );
  }
}

export default App;

Пожалуйста, помогите мне понять, почему это происходит

Answer 1

Необходимо убедиться, что данные users присутствуют в состоянии вашего компонента, прежде чем пытаться получить к нему доступ и отобразить его (т. Е. В элементе <h1>).

Имейте в виду, что метод render() компонента будет вызываться до componentDidMount() (т. Е. До завершения сетевого запроса). Это означает, что вам нужно учитывать, что users данных не присутствует в логике рендеринга вашего компонента. Чтобы решить эту проблему, внесите следующие изменения в свой компонент:

class App extends Component {
  state = {
    users: null, /* Set users inital state to null */
    loading: false
  };

  async componentDidMount() {
    this.setState({ loading: true });

    const res = await axios.get(
      "http://api.giphy.com/v1/stickers/search?q=monster&api_key=sIycZNSdH7EiFZYhtXEYRLbCcVmUxm1O"
    );

    /* Trigger re-render. The users data will now be present in 
       component state and accessible for use/rendering */
    this.setState({ users: res.data, loading: false });
  }

  render() {
    return (
      <div className="App">
       <Navbar />
       { /* If state.users is null, show loading string, otherwise render data */ }
       <h1> 
       { this.state.users === null ? "Loading" : 
         this.state.users.data[0].images.original.webp }
       </h1>
      </div>
    );
  }
}

Answer 2

это потому, что this.state.users - это пустой массив в первый раз, когда отправляется http-запрос на монтирование компонента и когда готов ответ, вы меняете состояние.

чтобы решить проблему, сделайте это:

  render() {
    return (
      <div className="App">
        <Navbar />,
        {
             this.state.user.length > 0 ?
                 <h1>{this.state.users.data[0].images.original.webp}</h1>
             :
                 <h1>Loading...</h1>
        }
      </div>
    );
  }