尝试显示图像时出错答案

【问题标题】：Getting an error when trying to display images尝试显示图像时出错
【发布时间】：2021-11-03 07:53:43
【问题描述】：

我正在尝试使用 React js 制作一个 photoLibrary 应用程序。我将图像的 url 存储在 firebase 实时数据库中，但是当我尝试使用 img 标签显示这些图像时，它会出错。

Error: img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

The above error occurred in the <img> component:
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

这就是我从 firebase 获取网址的方式

componentDidMount(){

    axios.get('/Data.json')
    .then(response => {
       const fetchedData = [];

       for(let key in response.data){
               fetchedData.push({
               ...response.data[key],
               id: key
           });
       }
       this.setState({loading: false, data: fetchedData});
    })

    .catch(error => {
        console.error(error)
        this.setState({loading:false});
    });

}

这就是我尝试显示图像的方式

this.state.data.reverse().map((res) => (    
        <div className="card1">
                   <Card
                   key={res.id}
                   style={{backgroundColor:"#343a40", textAlign:"left" , 
                   margin:"20px" ,color: "white",
                   left:"370px", borderRadius:"10px",
                   overflow:"hidden", width:"600px", 
                    height:"200px", boxShadow:"0 10px 18px 0 rgba(0,0,0,0.2)"}}
                   >

                  <Card.Body
                  className="container">
                       <h4>
                       ANONYMOUS
                        </h4>
                       <Card.Text>
                        {res.Comment} 
                       </Card.Text>
                        
                        <Card.Img>
                        <img src={res.ImageUrl} width = "400px" height="150px" />
                            </Card.Img>
                 
                 <Button className="btn btn-danger" 
                 style={{float:"right", width:"40px"}}
                 onClick={() => this.DeleteCommentHandler(res.id)}>
                     
                     <FontAwesomeIcon icon={faTrash}/>
                     
                     </Button> 
                   </Card.Body>
                   <Card.Footer>
                       {res.Date}
                   </Card.Footer>
                   </Card>                                
                   
           </div>
       )
)}

请帮忙。

【问题讨论】：

标签： reactjs firebase-realtime-database jsx

【解决方案1】：

<Card.Img> 是一个 img 标签，所以你应该更新为更改默认元素：

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

并且您可以在调用 setState 之前添加一个变量来检查组件已安装或已卸载

componentDidMount(){
  this.mounted = true;

  ...
  this.mounted && this.setState({loading: false, data: fetchedData});
  ...AbortController
}

componentWillUnmount(){
  this.mounted = false
}

【讨论】：