[英]Returning null when accessing object properties in state?
In my React.js app, I am fetching a quote from API and storing it in the state object, When trying to access the properties of the object which is stored in state. In my React.js app, I am fetching a quote from API and storing it in the state object, When trying to access the properties of the object which is stored in state. Returning null.
返回 null。
Code:代码:
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>
);
}
}
I am new to React.js, I spining my head for this problem around 2 hourse.我是 React.js 的新手,我花了大约 2 个小时来解决这个问题。 I didn't get any solution on web
我在 web 上没有得到任何解决方案
output showing quote object output 显示报价 object
When I try to console.log(this.state.quote)
it prints out this output, well it is fine.当我尝试
console.log(this.state.quote)
它打印出这个 output,很好。
and when I try console.log(this.state.quote.quoteText)
It will return can not read property
当我尝试
console.log(this.state.quote.quoteText)
它会返回can not read property
You must note the you are trying to fetch data asynchronously and also you fetch data in componentDidMount which is run after render, so there will be an initial rendering cycle wherein you will not have the data available to you and this.state.quote
will be null您必须注意您正在尝试异步获取数据,并且您在渲染后运行的 componentDidMount 中获取数据,因此将有一个初始渲染周期,其中您将没有可用的数据,并且
this.state.quote
将是null
The best way to handle such scenarios is to maintain a loading state and do all processing only after the data is available处理此类情况的最佳方法是保持加载 state 并仅在数据可用后进行所有处理
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>
);
}
}
When you are accessing the quoteText
without checking whether the key in the object is present or not it throws an error -当您在不检查 object 中的密钥是否存在的情况下访问
quoteText
时,它会引发错误 -
render(){
if(this.state.quote && this.state.quote.hasOwnProperty('quoteText')){
console.log(this.state.quote.quoteText);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.