我正在尝试在对数据库进行AJAX调用之后更改元素的src属性。我在getDefaultProps()
中定义了默认图像网址,但在AJAX调用之后图像不会更改。
PictureWidget
是控制状态的Section
组件的子组件(它还将dataSource和dataSourceParams传递给PictureWidget
)。我不确定我是否可以使用PictureWidget
的本地状态,所以我试图通过道具来做。
这是我的代码:
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})
)
)
}
});
这是我的控制台日志(原谅我格式不佳,仍然是Overflow的新手):
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()
抓取默认网址,但在AJAX调用this.props.url
确实更新为新值后,我怀疑React.createElement('img', {src: this.props.url})
是麻烦制造者。我不能这样更新src属性吗?
答案 0 :(得分:1)
这就是国家的目的。尝试使用getInitialState
代替getDefaultProps
并使用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 });
}