Wordpress React 博客未正确呈现图像

Question

我是 React 的新手。我正在尝试从我的 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>

Answer 1

您正在通过ajax 请求获取您的图像，但该组件未使用新的图像源进行更新。这里有几个问题。

在渲染方法中发出 ajax 请求是一种不好的做法。它们的最佳位置（如果您不使用 Flux、Redux 或其他状态管理库）是在构造函数中。

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

您可以在此处阅读有关反应状态的更多信息：https://facebook.github.io/react/docs/state-and-lifecycle.html