Javascript 如果图像src有效，则渲染组件

我想呈现一个图像组件，但在此之前我需要检查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}/>
            );
        };

    }

---

以下是我的渲染方法：

render（）

render（）{
返回(
{
this.props.mediaObjects.map（mediaObj=>{
让image=document.createElement（'img'）；
image.onload=（）=>{
};
image.src=mediaObj.url；
})
}
);
}

image.onload

是异步的，因此如果要检查URL的有效性，必须等到所有回调完成，并且只有在它呈现组件之后。创建一个解析URL的承诺链，并在解析完所有URL后更新组件状态。下面是一个工作示例：

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

}

componentWillMount:function（）{
让承诺=[]；
forEach（mediaObj=>
承诺，推动(
新承诺（（解决、拒绝）=>{
让image=document.createElement（'img'）；
image.src=mediaObj.url；
image.onload=（）=>{
mediaObj.validull=true；
解析（mediaObj）
}
image.onerror=（）=>{
mediaObj.validull=假；
解析（mediaObj）
}
})
))
允诺
.所有（承诺）
。然后（（值）=>{
this.setState（{mediaObjs:values}）；
})
},
render:function（）{
if（this.state.mediaObjs）{
让images=this.state.mediaObjs
.filter（（mediaObj）=>{
返回mediaObj.Validul
})
.map（（mediaObj，i）=>(
))
返回{images}
}否则{
退货（装货）
}  
}

您的

映射

回调没有返回任何内容，因此不会呈现任何内容。这是什么

组件？@Aaron您好，我考虑过这个问题，这就是为什么如果您看到我的更新，我会尝试修复它，但仍然失败的原因。：/抱歉，要我向您显示图像组件吗？从

onload

事件内部返回的

return

不会返回到

map

回调。基本上，在

映射

回调中仍然没有返回任何内容，这就是为什么没有呈现任何内容。是的，这个

组件是什么。这是你写的吗？还是第三方图书馆？如果它是您编写的组件，我只会添加您的行为，以便在图像加载到其中后仅渲染图像。@Aaron Custom Write。这是最初的想法，但是您不认为在图像的URL被破坏的情况下根本不加载组件会有意义吗？想象一下，如果有数百个组件。（假设您不能使用加载更多功能）谢谢，这是一个有趣的解决方案。我会试试这个，然后再给你回复。：）一个问题–为什么在收到回复后设置状态？更新：哦，我想你是想稍后再映射图像。不是mediaObjs。知道了！希望你能得到它！我没有检查代码是否有效。但我希望，你有原则！我刚刚看到我的代码中有一个错误。修复了

this.setState（{images:values}）

to

this.setState（{mediaObjs:values}）这里的主要思想是在所有承诺都完成并且设置了
this.state.mediaObjs
（而不是
this.props.mediaObjects
）时渲染图像。是。此外，我更喜欢使用.map（）而不是forEach并返回承诺。这就是我所做的。谢谢，伙计！很高兴帮助你！：）是的，我同意，
map
在这里看起来更好。
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>
    );
}

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

}