Question

我确信我是否正确地做到了这一点，但我很高兴因为我是React的新人而感谢...

基本上，我试图寻找＆＃34; post._links [＆＃39; wp：featuredmedia＆＃39;] [0] .href＆＃34;，如果存在它会给我一个新的api url供我取。在渲染我的组件之前，我想要这些新数据。

所以我试过以下代码。但是我得到了错误＆＃34;无法读取属性＆＃39; setState＆＃39;未定义：

import React, { Component } from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

// Dumb component
var x = 0;

export default class Post extends Component {

    constructor (props) {
        super(props);
        this.state = {
            featured: null,
        }
    }

    componentWillMount() {
        const { post } = this.props;

        var Fimgurl = post._links['wp:featuredmedia'][0].href;

        if(Fimgurl != null){
            fetch(Fimgurl).then(function(response) {
                return response.json();
            }).then(function(data) {
                this.setState({featured : data});
            }).catch(function(e) {
                console.log(e);
            });
        }

    }

    createMarkup(html) {
        return {
            __html: html
        };
    }

    render() {
        const { post } = this.props;
        x++;

        if(x % 2 != 0){
            return (
                <div className="blog-post col-sm-7">
                    <div class="thumbnail"><img src=""/></div>
                    <h2 className="blog-post-title">{post.title.rendered}</h2>
                    <p className="blog-post-meta">{post.date} <a href="#">Mark</a></p>

                    <div dangerouslySetInnerHTML={this.createMarkup(post.content.rendered)} />
                </div>
            );
        } else {
            return (
                <div className="blog-post col-sm-4 col-sm-offset-1">
                    <h2 className="blog-post-title">{post.title.rendered}</h2>
                    <p className="blog-post-meta">{post.date} <a href="#">Mark</a></p>

                    <div dangerouslySetInnerHTML={this.createMarkup(post.content.rendered)} />
                </div>

            );
        }
    }
}

我希望在组件中完成此操作的原因是因为我正在循环大量的帖子，并且每个帖子可能没有＆＃34; post._links [＆＃39; wp：featuredmedia＆＃39;] [0 ] .href＆＃34;这给了我一个新的获取网址，所以我基本上想要做的是。

如果当前帖子有post._links [＆＃39; wp：featuredmedia＆＃39;] [0] .href，则从该字符串中获取返回，然后将新的json数据发送到render函数，以便我可以打印它出来......

Answer 1

在您的承诺中，回调this不会引用组件实例。您应该绑定回调函数或使用使用词法作用域（ES6语法）的箭头函数：

fetch(Fimgurl).then((response) => {
    return response.json();
}).then((data) => {
    this.setState({featured : data});
}).catch((e) => {
    console.log(e);
});

在渲染之前反应获取新数据。 componentWillMount的问题

1 个答案: