Reagieren - Abbildung der Antwortdaten von get request - warum Antwortdaten nicht angezeigt werden?

Question

Ich bin neu zu reagieren und ich versuche, Antwortdaten anzuzeigen, die ich von einer get-Anfrage erhalten habe. Ich habe mehrere ähnliche Beiträge geschaut und versucht zu implementieren, was für andere funktioniert, aber für mich funktioniert nichts. In meinem Code unten, bekomme ich keine Fehler (Set-Zustand scheint auch zu funktionieren), aber nichts wird angezeigt und ich weiß nicht warum. Irgendwelche Ideen? Vielen Dank!

 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> 
       } 
      } 

machen geändert:

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> 

       } 
      } 

Fehler hier:

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

Answer 1

Das Problem mit Ihrem Code ist, dass Ihr setState nie aufgerufen. Wenn Sie Ihre letzte then-Funktion Ihres api-Aufrufs betrachten, haben Sie eine return-Anweisung direkt vor dem setState (d. H. Bei arr.map). Aus diesem Grund erreicht Ihr Code niemals den setState. Entfernen Sie die return-Anweisung und es sollte funktionieren:

   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 
         }); 
        }) 
       } 

bearbeiten :: Ok versuchen Sie in Klammern machen Einwickeln () wie diese

   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

Erstens Ihre getData Funktion oder sogar ganze Anforderungslogik in componentWillMount Funktion bewegen. Zweitens, ändern Sie Ihre render Funktion in:

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