複数のフェッチ反応

私はfetchメソッドを使用してサーバー上でAPI呼び出しを行っています。まず、私は、オブジェクトの配列（ [{"id": 1, "name": "a", "userid": "12"},{"id": 2, "name": "b", "userid": "22"},{"id": 3, "name": "c", "userid": "23"}]を有するように要求を行う。複数のフェッチ反応

私はユーザ）の情報を持っているuseridする必要があり、この場合、（より多くの情報を与えるために、このオブジェクトの値を必要後

そのために

、私は現時点ではすべてを表示する複数の要求をしています。しかし、複数の要求を行うと、私にエラーを与えている

オブジェクトが反応子（見つからとして有効ではありません：。。キー{_45を持つオブジェクト、 _81、_65、_54}）子のコレクションをレンダリングする場合は、代わりに配列を使用するか、 ReactアドオンのcreateFragment（object）を使用してオブジェクトをラップします。 View

のレンダリング方法を確認してください。これは私のコードです。 2回目のフェッチはrenderImageです。私は非同期として置くが、おそらく間違っていることは分かっている。

class Dashboard extends Component{ 

    constructor(props){ 
    super(props) 
    this.state = { 
     dataSource: new ListView.DataSource({ 
     rowHasChanged: (row1, row2) => row1 !== row2 
     }), 
     loaded: false, 
     datos: '', 
    } 

    } 

    componentDidMount(){ 
    this.fetchData(); 
    } 

    fetchData(){ 
     const REQUEST_URL = "XXXXXXX"; 
     fetch(REQUEST_URL) 
     .then((response) => response.json()) //la convertimos a json 
     .then ((responseData) =>{ 
      this.setState({ 
       dataSource: this.state.dataSource.cloneWithRows(responseData), 
      })   
     }) 
    } 

    renderLoadingView(){ 
     return(
      <View> 
      <Text>Cargando...</Text> 
      </View> 
      ) 
    } 

    async renderImage(userid){ 
      const REQUEST_URL = "XXXXXXX" + userid; 
      const response = await fetch(REQUEST_URL); 
      const json = await response.json(); 
      this.setState({loaded: true}) 
      return (<Thumbnail source={{uri: json.imageUrl}} />) 

    } 

    renderReceta(receta){ 
    return(  
        <Card> 
         <CardItem> 
          <TouchableOpacity onPress={()=> this.onUser(receta)}> 
           {this.renderImage(receta.user_id)} 
          </TouchableOpacity> 
          <Body> 
           <Text>{receta.Titulo}</Text> 
           <Text>{receta.Username}</Text> 
          </Body> 
          </CardItem> 
        </Card>    
     ) 
    } 

    render(){ 

     if(!this.state.loaded){ 
      return this.renderLoadingView(); 
     } 
     else{ 
      return(
      <Container> 
       <Header><Title>H</Title></Header> 
       <ListView 
       dataSource={this.state.dataSource} 
       renderRow={this.renderReceta.bind(this)} 
       /> 
      </Container> 
       ) 
     } 

    } 

}

出典

2017-10-25 david raja

あなたは最小のレポを作成できるので、何をしようとしているのか分かりやすいでしょうか？また、質問が十分に詳細ではないので、私はあなたの事を理解しています。 – Kafo

はい、最初に、データを受け取るためにフェッチを行います。そのデータで、イメージを表示するために2回目のフェッチ要求を行っています。最初のフェッチは正常に機能していますが、2番目のフェッチは何も与えていません。 –

'オブジェクトはリアクションの子としては有効ではありません.'というのは、あなたができないオブジェクトを直接レンダリングしようとしていることを意味します。すべてのレンダリングされたアイテムをチェックしてください。私はそれが 'renderReceta'にあるという卑劣な疑いを持っています – Andrew

したがって、1つの可能な解決策は、画像の状態を変えることです。例：

this.state = { 
     [...] 
     imageLoaded: false 
} 


    fetchData(){ 
     const REQUEST_URL = "XXXXXXX"; 
     fetch(REQUEST_URL) 
     .then((response) => response.json()) //la convertimos a json 
     .then ((responseData) =>{ 
      this.setState({ 
       dataSource: this.state.dataSource.cloneWithRows(responseData), 
      }) 
      this.renderImage(); //Now you start loading the Image  
     }) 
    } 


renderImage(userid){ 
      const REQUEST_URL = "XXXXXXX" + userid; 
      const response = await fetch(REQUEST_URL); //You can change this await and just load the fetch in background, does not matter right now. 
      const json = await response.json(); 
      this.setState({imageLoaded: true, imageUrl: json.imageUrl}) 
    } 


renderReceta(receta){ 
let image = null; 
    if (this.state.imageLoaded) 
     image = (<Thumbnail source={{uri: this.state.image.imageUrl}} />); 
    return(  
        <Card> 
         <CardItem> 
          <TouchableOpacity onPress={()=> this.onUser(receta)}> 
           {image} 
          </TouchableOpacity> 
          <Body> 
           <Text>{receta.Titulo}</Text> 
           <Text>{receta.Username}</Text> 
          </Body> 
          </CardItem> 
        </Card>    
     ) 
    }

このコードは、誤植をしてしまったのですぐには機能しませんが、うまくいけばポイントを得ることができます。

PS。私も前に似たような質問に答えたと思います。答えを受け入れることを検討して、解決しないようにしてください。

出典

2017-10-25 21:34:44 sfratini

答えて

関連する問題