Javascript .map funktioniert nicht mit reagieren nativen

Question

Ich weiß nicht, ob ich etwas vergessen habe, aber .map gibt die erwarteten Komponenten nicht zurück.

Dies ist mein Code:

data(){ 
     var user = firebase.auth().currentUser; 
      var uid = user.uid; 
      axios.get('apilink here'+user.uid).then(function(response){ 
      var arr = Object.values(response.data); 
      var listItems = arr.map(function(item){ 
       return <Text>{item.name}</Text> 
      }) 
      }) 
     } 

und das, was ich mache:

render() { 
     return (
      <Container style={{backgroundColor:'#F7F7F7'}}> 
      <Content> 
       {this.data} 
      </Content> 
      </Container> 
     ) 
     } 
    } 

Answer 1

Das Problem ist, dass Sie nicht Ihre data() Funktion direkt in Ihrer Render-Methode verwenden können, weil es asynchron.

Sie müssen mit einem Komponentenstatus arbeiten, der nach Ihrer API-Antwort festgelegt wird.

Lets sagen, dass dies Ihre Komponente ist:

export default class App extends React.Component { 
    constructor(props){ 
    super(props) 
    this.state = { 
     data: null 
    } 
    this.getData() 
    } 
    getData =() => { 
    var user = firebase.auth().currentUser; 
    var uid = user.uid; 
    axios.get('apilink here'+user.uid).then(function(response){ 
     var arr = Object.values(response.data); 
     var listItems = arr.map(function(item){ 
     return <Text>{item.name}</Text> 
     }) 
     this.setState({data: listItems}) 
    }) 
    } 
    render() { 
    return (
     <Container style={{backgroundColor:'#F7F7F7'}}> 
     <Content> 
      {this.state.data} 
     </Content> 
     </Container> 
    ); 
    } 
} 

Dies Sie den Zustand async Reaktion auf die Komponente dieses

Answer 2

Sie nähern sich in die falsche Art und Weise laden lassen. Ihre data-Funktion gibt zunächst nichts zurück, sodass in der Rendermethode nichts angezeigt wird. Sie können das Problem beheben, indem Sie einfach Ihre Funktion aufrufen, und Sie werden feststellen, dass der zurückgegebene Wert undefined ist.

Sie sind Daten von einer entfernten Ressource geladen, nach einer guten Praxis Docs ist dies in componentDidMount zu handhaben:

componentDidMount() aufgerufen wird, unmittelbar nachdem ein Bauteil montiert. Initialisierung, die DOM-Knoten erfordert, sollte hier gehen. Wenn Sie Daten von einem Remote-Endpunkt laden müssen, ist dies ein guter Ort, instanziieren Sie die Netzwerkanforderung. Wenn Sie den Status in dieser Methode setzen, wird ein erneutes Rendering auslösen.

So ein Weg, um diesen Ansatz wäre Ihr data Code in componentDidMount() zu bewegen und den Zustand der Komponente zu aktualisieren, sobald die Daten abgerufen wurden. Etwas wie dieses:

... 
constructor(props) { 
    super(props); 
    this.state = { data: [] }; 
} 

componentDidMount() { 
    var user = firebase.auth().currentUser; 
    var uid = user.uid; 
    axios.get('apilink here' + user.uid) 
    .then(function(response){ 
     var arr = Object.values(response.data); 
     this.setState({ data: arr }); 
    }); 
} 

render() { 
    return (
    <Container style={{backgroundColor:'#F7F7F7'}}> 
     <Content> 
     { 
      this.state.data 
      .map(function(item) { 
       return <Text>{item.name}</Text> 
      }) 
     } 
     </Content> 
    </Container> 
) 
}