CODEWITHSUNDEEP
reactjsreact-native
Otti
Otti

Reputation: 29

React not rendering component after componentDidMount

I have an Component, which is no rerendering after componentDidMount.

The render Method is looking like this :

render() {
            {
                console.log("----------RENDERING-----------------------------")
            }
            return (
            <ImageBackground
                source={require('../assets/images/bg.png')}
                style={styles.bg}
            >
                <View style={styles.containerHome}>
                    <View style={styles.top}>
                        <City/>
                        <Text>myapp</Text>
                        {/*<Filters />*/}
                    </View>

                    <CardStack
                        loop={true}
                        verticalSwipe={false}
                        renderNoMoreCards={() => null}
                        ref={swiper => (this.swiper = swiper)}
                    >
                        {this.state.data.map((item, index) => (
                            <Card key={index}>
                                <CardItem
                                    text={item.name}
                                    detail={item.detail}
                                    imageurl={item.imageurl}
                                    matches="0"
                                    actions
                                    onPressLeft={() => this.swiper.swipeLeft()}
                                    onPressRight={() => this.swiper.swipeRight()}
                                />
                            </Card>
                        ))}
                    </CardStack>
                </View>
            </ImageBackground>
        );
    }

...simply rendering a card stack.

Relevant here is this line :

this.state.data.map((item, index) => (

If i set the Data static from a file (Demo), it is working!

means if the line is looking like this

Demo.map((item, index) => (

everything alright!

but when i set the data in componentDidMount, it is not working! I really dont know what react-native is doing here :

componentDidMount() {
        this.setState({
            isLoaded: true,
            data: Demo
        });

I set the state.data to exactly the same Demo Values, but react is not rerendering.

It seems to be that this.state.data is always empty.

Maybe anyone can help me?

Thx so much

Upvotes: 1

Views: 1048

Answers (2)

Otti
Otti

Reputation: 29

Thx so much for the hint.

But i have already problems. Seems that i dont get the lifecylce, even when i am programming now react for a liitle bit.

Your hint was excellent, when i do it in the constructor, it is working. But in the end, i wann fetch the data there, and if i do this, it doesnt seems to work in the constructor.

fetch('http://hostname/api/v1/xxxx', {
            method: 'get',
            headers: new Headers({
                    'Authorization': 'Bearer pumuckl',
                    'Content-Type': 'application/json'
                }
            )
        }).then(res => res.json())
            .then(
                (result) => {
                    this.state = {
                        data: Demo,
                    }
                },
                // Note: it's important to handle errors here
                // instead of a catch() block so that we don't swallow
                // exceptions from actual bugs in components.
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    });
                }
            )

the code is from the facebook documentation! Fetch is working! What i am doing here is setting the state to the Demo Data, just to see if the lifecylce is waiting for the constructor and it seems that it doesn't. Seems that rendering is be triggered before the constructor has finished initializing (..i can not imagine, that would be really bad), but i get a null Exception in the List!

Do i have to work with async await? I dont think so. Just wanna initialze my List before rendering from a fetch.

Absolutely strange. so if you look in my logs how the lifecycle is processing :

10-28 17:44:06.847  4796  5362 I ReactNativeJS: *************************** Constructor *****************************************************
10-28 17:44:06.851  4796  5362 I ReactNativeJS: ----------RENDERING-----------------------------
10-28 17:44:06.918  4796  5362 I ReactNativeJS: *************************** component Did Mount *****************************************************
10-28 17:44:06.927  4796  5362 I ReactNativeJS: ----------RENDERING-----------------------------
10-28 17:44:06.935  4796  5362 I ReactNativeJS: *************************** component Did Update *****************************************************

I am really a little bit desperate at the moment....

when i log my data in the rendering method :

 render() {
            const data = this.state.data
            {
                console.log("----------RENDERING-----------------------------")
                console.log("----------DATA IN RENDERING-----------------------------")
                console.log(data)
            }
            return ( ...

actually, the data seem be there. But using

 {data.map((item, index) => (

does not work, while

 {Demo.map((item, index) => (

is working.

I really dont know what going on here?

Upvotes: 0

Awsaf
Awsaf

Reputation: 31

ComponentDidMount() executes after the render() function, so you had better do this before rendering and outside of ComponentDidMount():

this.setState({
    isLoaded: true,
    data: Demo
});

So initially, before render(), you have to set some value of data.

Try with three possible answers:

  • Default value {data:Demo}, or
  • Implement this.state in a function which can be executed before render(), or
  • Put it in the render() function before the return statement.

Upvotes: 2

Related Questions