Блог

Я пытаюсь создать приложение для фотолибрарии с помощью React js. Я сохраняю 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.
 

вот как я получаю URL-адреса из 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>
       )
)}
 

Пожалуйста, помогите.

<Card.Img> является тегом img, поэтому вы должны обновить его, чтобы изменить элемент по умолчанию:

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

И вы можете добавить переменную для проверки смонтированного или размонтированного компонента перед вызовом setState

 componentDidMount(){
  this.mounted = true;

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

componentWillUnmount(){
  this.mounted = false
}