reactjs - React - 尝试更改 src 属性

Question

我试图在 AJAX 调用数据库后更改元素的 src 属性。我在 getDefaultProps() 中定义了默认图像 url，但在 AJAX 调用之后图像不会更改。

PictureWidget 是控制状态的 Section 组件的子组件(它还将 dataSource 和 dataSourceParams 传递给 PictureWidget)。我不确定是否可以为 PictureWidget 使用本地状态，因此我尝试通过 props 来实现。

这是我的代码:

var PictureWidget = React.createClass({

getDefaultProps: function() {
  return {
    url: 'https://d2o57arp16h0eu.cloudfront.net/echo/img/no_image_available.png'
  }
},

componentDidMount: function() {
  this.componentDidUpdate();
},

componentDidUpdate: function() {

  // Grab img URL from DB
  var postData = {
    dataSource: this.props.params.dataSource,
    dataSourceParams: this.props.dataSourceParams
  };

  $.ajax({
    type: 'POST',
    url: ajax_endpoint,
    cache: false,
    data: postData,
    dataType: 'json',
    success: function(response) {
      if (response.data.length > 0) {
        this.updateImage(response.data[0][0]);
      }
    }.bind(this),
    error: function(response) {
      this.render();
    }
  });

},

updateImage: function(url) {
  console.log("Updating props.url with " + url);
  this.props.url = url;
  this.render();
},

render: function(imageURL) {
  console.log("Rendering img " + this.props.url);

  return React.createElement('div', {className: ' pure-u-' + this.props.columns},
    React.createElement('div', {className: 'picture-widget'},
      React.createElement('img', {src: this.props.url})
    )
  )
}
});

这是我的控制台日志(请原谅我的格式很差，对于溢出来说还是个新手):

Rendering img https://d2o57arp16h0eu.cloudfront.net/echo/img/no_image_available.png
Updating props.url with http://vignette3.wikia.nocookie.net/animalcrossing/images/4/49/Tumblr_lvrcmvCpsS1qbeyouo1_500.jpg/revision/latest
Rendering img http://vignette3.wikia.nocookie.net/animalcrossing/images/4/49/Tumblr_lvrcmvCpsS1qbeyouo1_500.jpg/revision/latest

最初的render()获取默认URL，但在AJAX调用this.props.url之后确实更新为新值，所以我怀疑React.createElement('img', {src: this.props.url}) 是麻烦制造者。我可以不这样更新 src 属性吗？

Answer 1

这就是状态的用途。尝试使用getInitialState而不是getDefaultProps并绑定(bind)url至this.state使用setState() .

getInitialState: function() {
  return {
    url: 'https://d2o57arp16h0eu.cloudfront.net/echo/img/no_image_available.png'
  };
},

updateImage: function(url) {
  console.log("Updating state.url with " + url);
  this.setState({ url: url });
}