Javascript 如何访问reactjs中componentWillMount（）内的变量值

我在

组件willmount

中赋值，如下所示

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

我试图显示

render（）中的值，如下所示

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

render（）{
console.log（“title”，this.title）；
返回(
);
}

但是我得到了未定义的值，即使我已经检查了
组件willmount
中的所有值。如何使用
组件中的值willmount
在
render（）中
您应该将这些数据存储在状态中。调用
componentWillMount
中的
setState
（建议更改为
componentDidMount
，以获得更清晰的意图）

演示：

class应用程序{
状态={
res:null，
}
componentDidMount（）{
然后（res=>this.setState（{res}））
}
render（）{
返回{JSON.stringify（this.state.res）}
}
}
您应该将这些数据存储在状态中。调用
componentWillMount
中的
setState
（建议更改为
componentDidMount
，以获得更清晰的意图）

演示：

class应用程序{
状态={
res:null，
}
componentDidMount（）{
然后（res=>this.setState（{res}））
}
render（）{
返回{JSON.stringify（this.state.res）}
}
}
由于您在
组件willmount
中有一个异步调用，因此只有在初始呈现之后响应才准备就绪，并且当您刚刚设置类变量时，不会调用重新呈现，因此结果不会反映在UI中。您应该使用state来存储数据。您还必须在componentDidMount生命周期中调用API。您可以查看此以了解更多详细信息


状态={
图像：“”，
标题：“”，
说明：“”，
元URL:“”
}
componentDidMount（）{
/*this.props.fetchMetaData（this.props.url）*/
axios.get(`https://api.microlink.io/?url=${this.props.url}`）
。然后（res=>{
这是我的国家({
image:res.data.data.image.url；
标题：res.data.data.title；
描述：res.data.data.description；
metaurl:res.data.data.url；
})
})
}
render（）{
返回(
);
}
由于您在
组件willmount
中有一个异步调用，因此只有在初始呈现之后响应才准备就绪，并且当您刚刚设置类变量时，不会调用重新呈现，因此结果不会反映在UI中。您应该使用state来存储数据。您还必须在componentDidMount生命周期中调用API。您可以查看此以了解更多详细信息


状态={
图像：“”，
标题：“”，
说明：“”，
元URL:“”
}
componentDidMount（）{
/*this.props.fetchMetaData（this.props.url）*/
axios.get(`https://api.microlink.io/?url=${this.props.url}`）
。然后（res=>{
这是我的国家({
image:res.data.data.image.url；
标题：res.data.data.title；
描述：res.data.data.description；
metaurl:res.data.data.url；
})
})
}
render（）{
返回(
);
}
componentWillMount的可能重复有人能解释一下为什么在这种情况下每个人都推荐componentDidMount而不是componentWillMount吗？@ShamseerAhammed
componentWillMount
不应该有副作用：。顺便说一句，这些生命周期方法正在被React Hooks所取代。有人能解释一下为什么在这种情况下大家都推荐componentDidMount而不是componentWillMount吗？@ShamseerAhammed
componentWillMount
不应该有副作用：。顺便说一句，这些生命周期方法正在被React Hooks所取代。
class App {
  state = {
    res: null,
  }
  componentDidMount() {
    axios.get(...).then(res => this.setState({res}))
  }
  render() {
    return <div>{JSON.stringify(this.state.res)}</div>
  }
}

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