Réagir - Mappage via les données de réponse à partir de la requête get-pourquoi les données de réponse ne sont pas affichées?

Question

Im nouveau pour réagir et j'essaye d'afficher des données de réponse que je reçois d'une demande d'obtention. J'ai regardé plusieurs poteaux semblables, essayant d'implémenter ce qui a fonctionné pour d'autres, mais pour moi rien ne fonctionne. Dans mon code ci-dessous, je ne reçois aucune erreur (l'état de l'ensemble semble fonctionner aussi) mais rien n'est affiché et je ne sais pas pourquoi. Des idées? Merci!

 class Testing extends React.Component { 
      constructor(props) { 
       super(props); 
       this.state = { 
        name: [] 
       }; 
       this.getData = this.getData.bind(this) 
      } 
      componentDidMount() { 
       this.getData(); 
      } 
      getData() { 
       axios.get('https://example.com) 
        .then(results => { 
         return results.data; 
        }) 
        .then(res => { 
         let arr = res.items; 
         let test = []; 
         return arr.map(function(item) { 
          test.push(item); 
         }) 
         this.setState({ 
          name: test 
         }); 
        }) 
       } 

       render() { 
        const persons = this.state.name.map((item, i) => { 
         return 
          <div> 
           <h1> {item.name} </h1> 
          </div> 
        }); 

        return 
        <div id = "layout-content" className = "layout-content-wrapper" > 
         <div className = "panel-list"> 
          All: {persons} 
         </div> 
        </div> 
       } 
      } 

changé rendre:

class Testing extends React.Component { 
      constructor(props) { 
       super(props); 
       this.state = { 
        name: [] 
       }; 
       this.getData = this.getData.bind(this) 
      } 
      componentDidMount() { 
       axios.get('https://example.com) 
        .then(results => { 
         return results.data; 
        }) 
        .then(res => { 
         let arr = res.items; 
         let test = []; 
         return arr.map(function(item) { 
          test.push(item); 
         }) 
         this.setState({ 
          name: test 
         }); 

        }) 
       } 


       render() { 
        <div> 
         this.state.name ? this.state.name.map((item, i) => { 
          return (
           <div> 
           <h1>{ item.name }</h1> 
           </div> 
          ) 
         }) : null; 
        </div> 

       } 
      } 

erreur ici:

<div> 
    this.state.name ? this.state.name.map((item, i) => { 
    return (
     ^
     <div> 
      <h1>{ item.name }</h1> 
     </div> 

Answer 1

Le problème avec votre code est que votre setState est jamais appelé. Si vous regardez votre dernière fonction de votre appel api, vous avez une déclaration de retour juste avant le setState (c'est-à-dire à arr.map). À cause de cela, votre code n'atteint jamais le setState. Supprimez l'instruction de retour et il devrait fonctionner:

   getData() { 
       axios.get('https://example.com) 
        .then(results => { 
         return results.data; 
        }) 
        .then(res => { 
         let arr = res.items; 
         let test = []; 
         arr.map(function(item) { 
          test.push(item); 
         }) 
         this.setState({ 
          name: test 
         }); 
        }) 
       } 

Modifier :: Ok essayez d'emballer vos render entre parenthèses () comme celui-ci

   render() { 
        const persons = this.state.name.map((item, i) => { 
         return 
          (<div> 
           <h1> {item.name} </h1> 
          </div>); 
        }); 

        return 
        (<div id = "layout-content" className = "layout-content-wrapper" > 
         <div className = "panel-list"> 
          All: {persons} 
         </div> 
        </div>); 
       } 

Answer 2

Tout d'abord, déplacez votre fonction getData ou la logique de demande, même tout en componentWillMount fonction. En second lieu, changer votre fonction render dans:

render() { 
    return (
    <div> 
     this.state.name ? this.state.name.map((item, i) => { 
      return (
      <div> 
       <h1>{ item.name }</h1> 
      </div> 
     ) 
     }) : null; 
    </div> 
    ) 
}