1

我在我的内部分配值componentWillMount，如下所示

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

但是即使我检查了里面的所有值，我也会得到未定义的值componentWillMount。我如何使用里面的componentWillMount值render()。

4

2 回答 2

4

由于您有一个异步调用componentWillMount，因此您的响应仅在初始渲染后准备就绪，并且当您仅设置类变量时，不会调用重新渲染，因此结果不会反映在 UI 中。您应该使用状态来存储数据。此外，您必须在 componentDidMount 生命周期中调用 API。您可以检查此以获取更多详细信息

在 React 中对异步请求使用 componentWillMount 或 componentDidMount 生命周期函数

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>
    );
}
于 2018-04-25T06:50:04.697 回答
2

您应该将这些数据存储在状态中。致电setState（componentWillMount建议更改componentDidMount为更清晰的意图）。

演示：

class App {
  state = {
    res: null,
  }
  componentDidMount() {
    axios.get(...).then(res => this.setState({res}))
  }
  render() {
    return <div>{JSON.stringify(this.state.res)}</div>
  }
}
于 2018-04-25T06:46:27.923 回答