多次获取反应

我正在使用fetch方法在服务器上进行API调用。首先，我请求有一个对象数组（ [{"id": 1, "name": "a", "userid": "12"},{"id": 2, "name": "b", "userid": "22"},{"id": 3, "name": "c", "userid": "23"}] .

在我需要这个对象的一个值来提供更多信息之后（在这种情况下，我需要userid拥有用户的信息）。

为此，我目前正在执行多个请求以显示所有内容。但是做多个请求会给我一个错误。

对象作为 React 子对象无效（找到：带有键 {_45 的对象， _81, _65, _54}).如果要呈现子项的集合，请改用数组或使用 createFragment（object）从反应附加组件。检查View的渲染方法

这是我的代码。第二个提取在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>
                )
        }
    }
}

因此，一种可能的解决方案是为图像设置不同的状态。例如：

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

这段代码不会立即工作，因为我有错别字并且我剥离了东西，但希望你能明白这一点。

附言。我想我之前回答过类似的问题，请考虑接受您的答案，以免它们无法解决。

相关内容

最新更新

热门标签：