Wordpress React Blog画像を正しく表示しない

Question

私はReactでは初めての方です。私は自分のwordpressサイトからライブフィードを作りようとしています。私は、各記事に関連する画像のレンダリングに問題があります。

以下のコードでは、イメージのURLを格納しているmediaSRC変数を記録しています。ロギング時に、適切なURL出力がコンソールに出力されます。私はif文の後に、後に、私のPostオブジェクトを作成しようとすると、私はHTMLのIMGは、IMGのSRC =「NO IMAGE」

を示していないPOSTをレンダリングしていた場合しかし、MEDIAIDは「NO IMAGE」

に=です

 <div className="main-feed"> 
     {posts.map(function(post){ 

      //mediaSRC is eventually going to by my <img src > 
      var mediaSRC ="NO IMAGE"; 
      //post.featured_media will access the media ID of the image 
      var media = post.featured_media; 

      // if there is no image set mediaSRC to this string 
      if (post.featured_media ==0){ 
       mediaSRC="MEDIA ID IS ZERO"; 
      } 
      // if there is an image, set mediaSRC to the url of image 
      else{ 
      j.ajax(React_Theme_Resource.url + "/wp-json/wp/v2/media/" +media) 
      .done(function(data){mediaSRC = data.guid.rendered; console.log(mediaSRC)}) 
      .fail(function(){console.log("FAIL")}) 
      .always(function(){}) 
     } 
      //Create Post object NOTE : working without images 
      return <Post post={post} mediaID={mediaSRC} key={post.id} /> 
     })} 
     </div> 

Answer 1

ajaxリクエストで画像を取得していますが、コンポーネントは新しい画像ソースで更新されません。ここにいくつかの問題があります。

レンダリングメソッドでajaxリクエストを行うのは悪いことです。 Flux、Redux、または他の状態管理ライブラリを使用していない場合は、それらのための最適な場所がコンストラクタにあります。

第2に、新しい画像ソースをコンポーネントに追加するために.setState()（やはり、反応状態を使用してコンポーネントとアプリケーションの状態を管理する）メソッドを使用する必要があります。

現在の状態を反応についての詳細を読むことができます：https://facebook.github.io/react/docs/state-and-lifecycle.html