React开发图库应用调用Firebase图片URL时img标签报错如何解决

问题1：img空元素报错解决 #

原因：你使用了React Bootstrap的Card.Img组件，该组件本身已经封装了原生<img>标签，你在其内部嵌套原生<img>相当于给<img>元素传入了子元素，而<img>属于HTML空元素（void element），不允许有子内容，因此触发报错。
解决方法二选一：

• 方案1：直接使用Card.Img组件传参，删除内部原生<img>

<Card.Img 
  src={res.ImageUrl} 
  style={{width: "400px", height: "150px"}} 
/>

• 方案2：删除外层Card.Img标签，直接使用原生<img>

<img src={res.ImageUrl} width = "400px" height="150px" />

额外注意：直接调用this.state.data.reverse()会修改原state数组，不符合React不可变数据原则，建议修改为[...this.state.data].reverse().map()，避免意外的状态异常。

问题2：已卸载组件更新state警告解决 #

原因：你在componentDidMount中发起了异步请求，若请求返回前组件已经被卸载，then/catch中的setState依然会执行，就会触发内存泄漏警告。
解决方法：添加组件挂载状态标记，或者取消未完成的异步请求，示例如下：

componentDidMount(){
    // 新增挂载标记
    this._isMounted = true;

    axios.get('/Data.json')
    .then(response => {
       const fetchedData = [];
       for(let key in response.data){
               fetchedData.push({
               ...response.data[key],
               id: key
           });
       }
       // 仅组件挂载时更新state
       if(this._isMounted) {
         this.setState({loading: false, data: fetchedData});
       }
    })
    .catch(error => {
        console.error(error)
        // 仅组件挂载时更新state
        if(this._isMounted) {
          this.setState({loading:false});
        }
    });
}

componentWillUnmount() {
  // 组件卸载时修改标记
  this._isMounted = false;
}

内容的提问来源于stack exchange，提问作者jashan khangura