-1
votes

"TypeError: impossible de lire la propriété" carte "de non définie" dans ReactJS App

Je continue à obtenir cette erreur. Cela a déjà fonctionné, mais au fil du temps, il a commencé à me donner l'erreur.

J'ai essayé de changer la fonction de flèche en une fonction standard. J'ai également essayé d'utiliser le même code dans une autre application, et cela a fonctionné. Mais pour une raison quelconque, je reçois seulement l'erreur dans cette application. P>

import React from 'react';

const NewSingle = ({item}) => (
    <div className='col s4'>
        <div className='card'>
            <div className='card-image'>
                <img src={item.urlToImage} alt={item.title} />
                <span className='card-title'>{item.source.name}</span>
            </div>
            <div className='card-content'>
            <p>{item.title}</p>
            </div>
            <div className='card-action'>
                <a href={item.url} target='_blank' rel="noopener noreferrer">Full article</a>
            </div>
        </div>
    </div>
);

export default NewSingle;

javascript reactjs arrays

4 commentaires

votre clé API est visible dans ce post, je ne sais pas si cela était prévu

Ce n'était pas le cas, mais ça va, j'ai régénéré un nouveau.

On dirait que rendu () est appelé avant votre Fetch la chaîne est terminée. peut-être utiliser un débogueur avant renvoyer cela.state.news.map (...) pour voir ce que vous faites de votre gestion


                                        
                                                                            L'état de l'état ou des nouvelles est indéfini lors de cet appel de rendu. Logez-les pour savoir qui. Le fait que cela ne se produise que signifie parfois que c'est probablement un problème avec l'asynchronicité.



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Etant donné que  Error  est uniquement défini après la récupération et que vous ne vérifiez pas si  news  détient des données, vous devez ajouter un conditionnel avant  retourner < / Code> Dans votre rendu ou changez le conditionnel dans RenderItems vers  si (! this.state.error && (this.state.news && this.state.news.length))                                 


                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            

                        

                        
                                            
                            
                                
                                    2
 votes
                                
                            
                            
                                
                                     Essayez de protéger le code par 
if (!this.state.error) {
      return this.state.news.length> 0 && this.state.news.map((item) => (
        <NewSingle key={item.url} item={item} />
      ));

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Je ne pense pas  Fetch  code> fonctionne comme vous vous attendez. Même sur une mauvaise demande, il ne lancera pas une erreur, ce qui signifie  data.Articles  code> sera parfois indéfini.  FETCH  code> définit  réponse.ok  code> Selon si cela a été réussi, vous pouvez donc utiliser cela pour vérifier avant de continuer. 
 Essayez de changer votre fetch à quelque chose comme ceci:  P> 
fetch(url)
  .then((response) => {
    // Add this check and throw an error if it fails
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response.json();
  })
  .then((data) => {
    this.setState({
      news: data.articles
    })
  })
  .catch((error) => {
    this.setState({
      error: true
    })
  });

                                

                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Merci, cela semblait résoudre le problème!