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>数据。

请记住component's render() method will be called before 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>
    );
  }

ReactJS：使用状态会导致错误呈现标题

2 个答案: