Returning code in fetch React-Native

Question

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

        }
    }

What is .done()?

guest271314
– guest271314

2017-10-22 18:11:11 +00:00
Commented Oct 22, 2017 at 18:11 — guest271314
– guest271314, Commented Oct 22, 2017 at 18:11

sebastianf182 · Accepted Answer · 2017-10-23 03:38:20Z

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.

guest271314 · Accepted Answer · 2017-10-22 18:13:22Z

0

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

answered Oct 22, 2017 at 18:13

guest271314

1

3 Comments

dddddrrrrrr Over a year ago

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.

guest271314 Over a year ago

@dddddrrrrrr Have little experience using reactjs. Two issues with code at Question is that no value is returned from renderImage function jsfiddle.net/su8rpycx, and .done() is not a Promise method

guest271314 Over a year ago

@dddddrrrrrr Indicated the issues that am able to view at code at Question. Perhaps another user can point out issues with the specific reactjs code

Collectives™ on Stack Overflow

Returning code in fetch React-Native

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related