Wordpress反应博客无法正确呈现图像

时间:2017-03-02 16:06:53

标签: wordpress reactjs

我是React的新手。我正试图从我的wordpress网站制作一个实时源。我无法渲染与每篇文章相关的图像。

在下面的代码中,我记录了我正在存储图像网址的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>

1 个答案:

答案 0 :(得分:0)

您是通过ajax请求获取图片,但未使用新图片源更新该组件。这里有几个问题。

在render方法中生成ajax请求是一种不好的做法。对他们来说最好的地方(如果你没有使用Flux,Redux或其他状态管理库)是在构造函数中。

其次,您需要使用.setState()(再次,如果您使用反应状态来管理组件和应用程序的状态)方法,以将新图像源添加到组件中。

您可以在此处详细了解反应状态:https://facebook.github.io/react/docs/state-and-lifecycle.html