Как получить доступ к значениям переменных внутри componentWillMount () вactjs - PullRequest
Новая
       10

Как получить доступ к значениям переменных внутри componentWillMount () вactjs

0 голосов
/ 25 апреля 2018

Я присваиваю значения внутри моего 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().

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Поскольку у вас есть асинхронный вызов в componentWillMount, ваш ответ готов только после первоначального рендеринга, и когда вы просто устанавливаете переменные класса, повторный рендеринг не вызывается, и, следовательно, результат не отражается в пользовательском интерфейсе. Вы должны использовать состояние для хранения данных. Также у вас должен быть вызов API в жизненном цикле componentDidMount. Вы можете проверить это для более подробной информации

Используйте функции жизненного цикла componentWillMount или componentDidMount для асинхронного запроса в 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>
    );
}
0 голосов
/ 25 апреля 2018

Вы должны хранить эти данные в состоянии. Звоните 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>
  }
}
...