WordPress的反應博客不正確渲染圖像

我是新的React。我正在嘗試從我的WordPress站點製作一個實時飼料。我無法渲染與每篇文章相關的圖像。WordPress的反應博客不正確渲染圖像

在下面的代碼中，我記錄了我正在存儲圖像的url的mediaSRC變量。將這個正確的URL輸出記錄到控制檯時。然而，當我嘗試if語句後以後創建我的Post對象，該mediaID是=爲「NO IMAGE」

當我渲染POST的HTML IMG正顯示出IMG SRC =「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>

來源

2017-03-02 chris cozzens

您通過ajax請求獲取圖像，但未使用新圖像源更新組件。這裏有幾個問題。

在您的渲染方法中製作ajax請求是一種不好的做法。對他們來說最好的地方（如果你沒有使用Flux，Redux或其他狀態管理庫）在構造函數中。

其次，您需要使用.setState()（同樣，如果您使用反應狀態來管理組件和應用程序的狀態）將新圖像源添加到組件。

您可以在此處詳細瞭解反應狀態：https://facebook.github.io/react/docs/state-and-lifecycle.html

來源

2017-03-02 16:31:59

感謝會看看，現在我感謝你的幫助。如果我能夠解決，將會標記爲已解決。 –

WordPress的反應博客不正確渲染圖像

回答

相關問題