React异步加载图片报错：Uncaught Error: Objects are not valid...

Question

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">
});

却是不报错的。

Answer 1

问题在于如果一切都顺利的情况，你上面的代码相当于

this.state = {
    AsynImg: image //image其实就是一个Object,因为是new Image()生成的
};

这样就变成了，你在render里就是

{ Object } // 这不是一个DOM，所以会报错

我的尝试解决方案，在loadImageAsync方法的resolve那句

resolve(image);

改成

resolve(<img {...image} />);

Answer 2

因为接口返回的data并不是一个img标签，或者说一个dom，组件；而是一个图片文件，一个png文件，react没法直接渲染一个png文件