在状态中访问对象属性时返回 null？

Question

在我的 React.js 应用程序中，我正在从 API 获取引用并将其存储在状态对象中，当我试图访问存储在状态中的对象的属性时。返回空值。

代码：

import React, { Component } from "react";

export default class Quotes extends Component {
  constructor(props) {
    super(props);

    this.state = {
      quote: null,
    };
  }

  componentDidMount() {
    fetch("https://quote-garden.herokuapp.com/api/v2/quotes/random")
      .then((response) => response.json())
      .then((quote) => this.setState({ quote: quote.quote }))
      .catch((error) => console.log(error));
  }
  render() {
    console.log(this.state.quote.quoteText); //This is returning null
    console.log(this.state.quote); //This is working fine.
    return (
      <div>
        <p>// Author of Quote</p>
      </div>
    );
  }
}

我是 React.js 的新手，我为这个问题绞尽脑汁大约 2 小时。我没有在网上找到任何解决方案

output showing quote object

当我尝试 console.log(this.state.quote) 它打印出这个输出，很好。

当我尝试 console.log(this.state.quote.quoteText) 它会 return can not read property

output showing can not find property

Answer 1

您必须注意，您正在尝试异步获取数据，并且还在渲染后运行的 componentDidMount 中获取数据，因此会有一个初始渲染周期，其中您将无法获得数据你和 this.state.quote 将为空

处理此类场景的最佳方式是保持加载状态，只有在数据可用后才进行所有处理

import React, { Component } from "react";

export default class Quotes extends Component {
  constructor(props) {
    super(props);

    this.state = {
      quote: null,
      isLoading: true,
    };
  }

  componentDidMount() {
    fetch("https://quote-garden.herokuapp.com/api/v2/quotes/random")
      .then((response) => response.json())
      .then((quote) => this.setState({ quote: quote.quote, isLoading: false }))
      .catch((error) => console.log(error));
  }
  render() {
    if(this.state.isLoading) {
     return <div>Loading...</div>
   }
    console.log(this.state.quote.quoteText); //This is returning proper value
    console.log(this.state.quote); 
    return (
      <div>
        <p>// Author of Quote</p>
      </div>
    );
  }
}

Answer 2

当您访问 quoteText 而不检查对象中的键是否存在时，它会抛出错误 -

render(){
  if(this.state.quote && this.state.quote.hasOwnProperty('quoteText')){ 
    console.log(this.state.quote.quoteText);
   }
}

在状态中访问对象属性时返回 null？

Returning null when accessing object properties in state?

javascript

object

reactjs

react-lifecycle