javascript - 如果图像 src 有效则渲染组件

Question

我想渲染一个图像组件，但在此之前我需要检查 URL 是否未损坏。

我的方法没有给出任何错误，onload 函数正在加载。虽然，我假设我正在错误地做(或不做)组件的返回。

有人能告诉我哪里出了问题吗？

---

~更新~我什至尝试使用 renderImage 方法来确保我使用的是 return() 语法...

    renderImage(mediaObj) {
        let image = document.createElement('img');
        image.src = mediaObj.url;
        console.log("mediaObj", image);
        image.onload = function() {
            console.log("onload");
            return (
                <Image
                    key={`carousel_${mediaObj.media_id}`}
                    {...this.props}
                    mediaObj={mediaObj}/>
            );
        };

    }

和 map ...

this.props.mediaObjects.map(mediaObj => this.renderImage(mediaObj))

---

这是我的渲染方法:

渲染()

render () {
    return (
        <div id="galleryImages_outerWrapper">
            <div id="galleryImages_innerWrapper" className="flexParent flexRowWrap">
                {
                    this.props.mediaObjects.map(mediaObj => {
                        let image = document.createElement('img');
                        image.onload = () => {
                            <Image
                                key={`carousel_${mediaObj.media_id}`}
                                {...this.props}
                                mediaObj={mediaObj}/>
                        };

                        image.src = mediaObj.url;
                    })
                }
            </div>
        </div>
    );
}

Answer 1

image.onload 是异步的，所以如果你想检查 url 的有效性，你必须等到所有回调都完成，并且只有在它呈现组件之后。做一个解析 url 的 promise 链，并在所有这些都被解析后更新组件状态。这是一个 fiddle与工作示例:

componentWillMount: function() {  
  let promises = [];
  mediaObjects.forEach(mediaObj =>
    promises.push(
      new Promise((resolve, reject) => {
        let image = document.createElement('img');
        image.src = mediaObj.url;
        image.onload = () => {
          mediaObj.validUrl = true;
          resolve(mediaObj)
        }
        image.onerror = () => {
          mediaObj.validUrl = false;
          resolve(mediaObj)
        }
      })
  ))
  Promise
    .all(promises)
    .then((values) => {
      this.setState({mediaObjs: values});
    })
},

render: function() {
  if (this.state.mediaObjs) {
    let images = this.state.mediaObjs
      .filter((mediaObj) => {
        return mediaObj.validUrl
       })
       .map((mediaObj, i) => (
         <span key={i}><img src={mediaObj.url}/></span>
       ))
    return <div>{images}</div>
  } else {
    return (<div>Loading</div>)
  }  

}