I'm assigning values inside my componentWillMount
like shown in below
componentWillMount() {
/*this.props.fetchMetaData(this.props.url);*/
axios.get(`https://api.microlink.io/?url=${this.props.url}`)
.then(res => {
this.metaData = res;
console.log("99999999999 ", this.metaData.data.data);
this.image = this.metaData.data.data.image.url;
this.title = this.metaData.data.data.title;
this.description = this.metaData.data.data.description;
this.metaurl = this.metaData.data.data.url;
console.log("title ", this.title);
});
}
And i'm trying to show the values inside my render()
as follows.
render() {
console.log("title ", this.title);
return (
<div>
<a className="previewUrlContainer float_left unchange_div border"
href={metaurl}
target="_blank">
<img className="previewImage margin_bottom10px" src={this.image}></img>
<div className="margin_bottom10px font_bold">{this.title}</div>
<div className="margin_bottom10px medium_font">{this.description}</div>
<div className="margin_bottom10px small_font">{this.metaurl}</div>
</a>
</div>
);
}
But I get undefined values even though I've checked all the values inside componentWillMount
. How can i use the values inside componentWillMount
within render()
.
Since you have a async call in componentWillMount
, you response is only ready after the initial render and when you just set the class variables a re-render is not called and hence the result is not getting reflected in UI. You should use state to store the data. Also you must have your API call in componentDidMount lifecycle. You can check this for more details
Use componentWillMount or componentDidMount lifecycle functions for async request in React
state= {
image: '',
title: '',
description: '',
metaurl: ''
}
componentDidMount() {
/*this.props.fetchMetaData(this.props.url);*/
axios.get(`https://api.microlink.io/?url=${this.props.url}`)
.then(res => {
this.setState({
image: res.data.data.image.url;
title: res.data.data.title;
description : res.data.data.description;
metaurl : res.data.data.url;
})
})
}
render() {
return (
<div>
<a className="previewUrlContainer float_left unchange_div border"
href={metaurl}
target="_blank">
<img className="previewImage margin_bottom10px" src={this.state.image}></img>
<div className="margin_bottom10px font_bold">{this.state.title}</div>
<div className="margin_bottom10px medium_font">{this.state.description}</div>
<div className="margin_bottom10px small_font">{this.state.metaurl}</div>
</a>
</div>
);
}
You should store those data in the state. Call setState
in componentWillMount
(recommended to change to componentDidMount
for clearer intention).
Demo:
class App {
state = {
res: null,
}
componentDidMount() {
axios.get(...).then(res => this.setState({res}))
}
render() {
return <div>{JSON.stringify(this.state.res)}</div>
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.