javacript .mapは反応ネイティブでは動作しません

Question

.mapは期待されたコンポーネントを返さないが、何かを忘れた場合はわかりません。

これは私のコードです：

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

と、この私がレンダリングてる何：

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

Answer 1

を問題は、それはだから、あなたのrenderメソッドで直接ごdata()機能を使用できないということです非同期。

コンポーネントの状態で作業する必要があります。コンポーネントの状態は、APIの応答後に設定されます。

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

これはあなたのコンポーネント

Answer 2

あなたは間違った方法でこれに近づいているに状態非同期応答をロードできるようになる：

が、これはあなたのコンポーネントであると言うことができます。 data関数は何も返さないので、レンダリングメソッドには何も表示されません。関数を呼び出すだけでデバッグすることができ、返される値はundefinedであることがわかります。 （）

componentDidMount成分は が装着された直後に呼び出される。

あなたは、リモートリソースからデータをロードする良い方法をドキュメントに記載されているがcomponentDidMountでこれを処理することです。 DOMノードを必要とする初期化はここに行かなければなりません。 の場合、リモートエンドポイントからデータをロードする必要があります。 ネットワークリクエストをインスタンス化するのに適しています。このメソッドの状態を設定すると、 が再描画をトリガーします。

だから、これにアプローチするための1つの方法は、データが取得された後componentDidMount()にあなたのdataコードを移動し、コンポーネントの状態を更新することです。このようなもの：

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