verschwinden Werte this.state.array ReactJS

Question

ich ein Array mit dem folgenden Verfahren am Abrufen:

module.exports = { 
      fetchIntegrations(self) { 
      var encodedURI = "OMITTED"; 
      axios.get(encodedURI).then(function (r) { 
       self.setState({ 
       response: r.data, 
       }) 
      }) 
      return self 
      } 
     }; 

Dann habe ich das von dieser Methode nenne:

_getIntegration(){ 
      var self = this; 
      var axios = require("axios"); 
      axios.defaults.headers.common[ "Authorization"] = this.props.userInfo.isAuthorized 

      api.fetchIntegrations(self); 
      console.log("This " , this); 
      console.log("This.state " , this.state); 
      console.log("This.state.response ", this.state.response); 

return this.state.response.map((integration) => { 
    return (<NavBarItem key={integration.identifier} 
      name={integration.displayName}/>); 
      }); 
     } 

Dies ist die NavBarItem Klasse:

class NavBarItem extends React.Component { 
    render() { 
    return(
    <div className="navbaritem">     
      <Text className="navbaritem-name">{this.props.name}</Text> 
      </div> 
    ); 
    } 
} 

Die _getIntegration Methode innerhalb dieser Layout-Klasse ist (verkürzt):

Wenn dies in der Konsole eingeloggt ist, hat es meine Antwort-Array in it mit Elementen. In diesem.Status und dieser.Status.Antwort enthält das Antwort-Array irgendwie 0 Elemente. Ich habe versucht, setState() an einigen verschiedenen Orten ohne Glück zu verwenden. Ideen, wie ich auf meine Antwort-Array-Werte zugreifen kann? Mein Ziel ist es, NavBarItems für jedes Objekt im Array zu erstellen, aber da es keine Elemente in meinem Antwort-Array gibt, passiert nicht viel :( Vielen Dank!

Answer 1

Sie sollten den Code so umstrukturieren, dass der fetchIntegrations-Dienst zurückkehrt ein Versprechen mit den Daten zurück zu Ihrer Layout-Komponente.Sie können die console.log in einer der folgenden Funktionen setzen: shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate, wenn Sie den Status der Komponente während jeder Phase sehen möchten

Ich postete ein Beispiel auf CodeSandbox : https://codesandbox.io/s/lrvzm872v9

Die wichtigsten Teile von sind die Layout-Komponente und der fetchIntegration-Dienst:

class Layout extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     response: [], 
    } 
    } 

    componentDidMount() { 
    fetchIntegrations().then((data) => { 
     this.setState({ 
     response: data 
     }) 
    }) 
    } 

    getIntegrations() { 
    const integrations =this.state.response.map((integration) => { 
     return (
     <NavBarItem key={integration.identifier} 
      name={integration.displayName} /> 
    ) 
    }); 
    return integrations; 
    } 
    render() { 
    if (this.state.response.length == 0) { return null; } 
    const integrations = this.getIntegrations(); 
    return (
     <nav> 
     { integrations } 
     </nav> 
    ) 
    } 
} 

fetchIntegration:

function fetchIntegration(){ 
    var encodedURI = "OMITTED"; 
    return axios.get(encodedURI).then(function (r) { 
      return r.data; 
    } 
}