CODEWITHSUNDEEP
javascriptreactjsreact-native
dddddrrrrrr
dddddrrrrrr

Reputation: 317

Returning code in fetch React-Native

My problem is in the function renderImage(), that I want to return some code and for the moment it's not working. I tried different things but now I don't know what else I can do.

This is the error that I have:

Objects are not valid as a React child (found: object with keys {_45, _81, _65, _54}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of View.

This is my code. The important function is renderImage(userid)

Thanks. 

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(){
            fetch(REQUEST_URL)
            .then((response) => response.json())
            .then ((responseData) =>{   
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData),
                    loaded: true
                })

            })
        }

        renderLoadingView(){
            return(
                <View>
                <Text>Cargando...</Text>
                </View>
                )
        }
        renderImage(userid){
        const REQUEST_URL = "xxxxxxx" + userid;

        return fetch(REQUEST_URL)
        .then((response) => response.json())
        .then ((responseData) =>{  
            return (<Thumbnail style={{width: 50, height: 50, borderRadius: 25}} source={{uri: responseData.imageUrl}} />)  
        })        
        }


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

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

        }
    }

Upvotes: 0

Views: 92

Answers (2)

sebastianf182
sebastianf182

Reputation: 9978

Your problem is here:

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

You are using two fetch requests to actually complete the request but you are immediately returning the result of this.renderImage. That method is returning a fetch that is not actually done by the time you return it:

renderImage(userid){
        const REQUEST_URL = "xxxxxxx" + userid;

        return fetch(REQUEST_URL)
        .then((response) => response.json())
        .then ((responseData) =>{  
            return (<Thumbnail style={{width: 50, height: 50, borderRadius: 25}} source={{uri: responseData.imageUrl}} />)  
        })        
        }

You return the fetch response but that is running in the background. Try something like this (and remove the other line that updates the loaded state):

this.setState({loaded: true}, () => {
return (<Thumbnail style={{width: 50, height: 50, borderRadius: 25}} source={{uri: responseData.imageUrl}} />) 
});

There are many solutions for this. You could also just use an Image with a source a let RN handle the loading, or have two different state values, one for the first loading and then the image. The thing is that you are chaining two fetch requests.

Upvotes: 1

guest271314
guest271314

Reputation: 1

fetch(REQUEST_URL) should be on the same line as return, .done() is not a method of Promise object

return fetch(REQUEST_URL)
        .then((response) => response.json())
        .then ((responseData) =>{  
            return (<Thumbnail style={{width: 50, height: 50, borderRadius: 25}} source={{uri: responseData.imageUrl}} /> )     
        })

Upvotes: 0

Related Questions