Question

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

在下面的代码中，我记录了我正在存储图像网址的mediaSRC变量。将此正确的URL输出记录到控制台时。但是当我在if语句之后尝试创建Post对象时，mediaID = =＆＃34; NO IMAGE＆＃34;

当我渲染POST时，html img显示img src =＆＃34; NO IMAGE＆＃34;

      <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请求获取图片，但未使用新图片源更新该组件。这里有几个问题。

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

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

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

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

1 个答案: