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

1、问题描述

(1)loadImageAsync(url)方法异步生成一个<img src="https://cdn2.jianshu.io/asset...;>,将其更新到this.state.AsynImg更新到组件中,运行报错:

clipboard.png

clipboard.png

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

却是不报错的。

阅读 3.4k
2 个回答

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

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

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

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

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

resolve(image);

改成

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题