分享
三行代码  ›  专栏  ›  技术社区  ›  Nawaz Mujawar

在状态下访问对象属性时返回null?

  •  2
  • Nawaz Mujawar  · 技术社区  · 1 周前

    在我的反应.jsapp,当我试图访问存储在state中的对象的属性时,我正在从API获取一个引号并将其存储在state对象中。返回空值。

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

    我是新来的反应.js,我在2小时左右为这个问题绞尽脑汁。我在网上没找到任何解决办法

    output showing quote object

    当我试图 console.log(this.state.quote)

    当我试着 console.log(this.state.quote.quoteText) can not read property

    output showing can not find property

    3 回复  |  直到 1 周前
        1
  •  2
  •   Shubham Khatri    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>
        );
      }
    }
    
        2
  •  0
  •   Dlucidone    1 周前

    quoteText

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