1、问题描述
(1)loadImageAsync(url)方法异步生成一个<img src="https://cdn2.jianshu.io/asset...;>,将其更新到this.state.AsynImg更新到组件中,运行报错:
2、报错部分代码
class App extends Component {
constructor(props) {
this.state = {
AsynImg: null
};
}
componentDidMount() {
this.ajaxReq();
this.loadImageAsync("https://cdn2.jianshu.io/assets/web/web-note-ad-side-banner-22096669b4c4b91c3b9266894e951aef.png")
.then((data) => {
console.log(data);
this.setState({
AsynImg: data
});
}, (error) => {
console.log(error);
}
);
}
render() {
return (
<div className="App">
{this.state.AsynImg}
</div>
);
}
loadImageAsync(url) {
return new Promise(function (resolve, reject) {
const image = new Image();
image.onload = function () {
resolve(image);
};
image.onerror = function () {
reject(new Error('Could not load image at ' + url));
};
image.src = url;
});
}
}
3、尝试解决方案
(1)将
this.setState({
AsynImg: data
});
替换为:
this.setState({
AsynImg: <img src="https://cdn2.jianshu.io/assets/web/web-note-ad-side-banner-22096669b4c4b91c3b9266894e951aef.png">
});
却是不报错的。
问题在于如果一切都顺利的情况,你上面的代码相当于
这样就变成了,你在render里就是
我的尝试解决方案,在loadImageAsync方法的resolve那句
改成