リアクションはレンダリングの前に新しいデータをフェッチします。 componentWillMount

Question

の問題私はこの権利をやっているかどうかわからでも確信しているが、私は反応するように新しいですと、私はそうbasicly ...

を修正をいただければと思い、私はpost._links」を探すためにしようとしています['wp：featuredmedia'] [0] .href "、それが存在すれば私にフェッチするための新しいapi urlを与えます。そして、コンポーネントをレンダリングする前に、この新しいデータが必要です。

私は次のコードを試しました。しかし、私は「プロパティを読み取ることができません 『SETSTATE』未定義の：

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> 

      ); 
     } 
    } 
} 

私は記事のトンをループしていて、各ポストが持っていない可能性があるため、私は、このコンポーネントで実行したい理由がある」というエラーが得たポストを.wlinks ['wp：featuredmedia'] [0] .href "これは私に新しいフェッチURLを与えるので、私は基本的に何をしたいのですか？

現在の投稿にpost._links ['wp：featuredmedia'] [ 0] .hrefを返し、返された文字列からフェッチし、レンダリング関数に新しいjsonデータを送信して印刷することができます。

Answer 1

約束のコールバックでthisは参照しませんコンポーネントインスタンスに渡します。あなたのコールバック関数をバインドするか、レキシカルスコープ（ES6構文）を使用して、矢印の機能を使用する必要があります。

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