useState Hook not taking data

Question

I am trying to set the state to the props I get from Redux. I have an array, props.feed, displaying an array on the console. But setting my state to this array doesn't change the state, that remains undefined, and it's not rendering my Flatlist because the data is undefined.

If I log props.feed it works. If I log my state posts after using setPosts the hook doesn't take the data.

function FeedScreen(props) {
    const [posts, setPosts] = useState([]);
    const imageWidth = Math.floor(useWindowDimensions().width);


    useEffect(() => {
        if (
            props.usersFollowingLoaded == props.following.length &&
            props.following.length != 0
        ) {
            props.feed.sort((x, y) => {
                return x.creation - y.creation;
            });
            console.log("Props Feed", props.feed);
            setPosts(props.feed);
            console.log("Posts of friends", posts);
        }
    }, [props.usersFollowingLoaded, props.feed]);

    return (
        <View style={styles.container}>
            <View style={styles.containerGallery}>
                <FlatList
                    numColumns={1}
                    data={posts}
                    horizontal={false}
                    renderItem={({ item }) => (
                        <View style={styles.containerImage}>
                            <Text style={styles.container}>
                                {item.user.name}
                            </Text>
                            <Image
                                style={styles.image}
                                source={{ uri: item.downloadURL }}
                            />
                            <Text
                                onPress={() =>
                                    props.navigation.navigate("Comments", {
                                        postId: item.id,
                                        uid: item.user.uid,
                                    })
                                }
                            >
                                View comments...
                            </Text>
                        </View>
                    )}
                />
            </View>
        </View>
    );
}

Here is the console.

it does change the state, you just won't see that by logging it straight away. `posts` will still be updated to that 3-element array on the next render, which should happen more or less straight away. So what is the actual problem, besides a `console.log` output that isn't what you expected? — Robin Zigmond, Aug 04 '21 at 22:05
The problem is actually the Flatlist. It should take an array in the data prop of Flatlist, and is getting the array indeed from posts when re-rendering. So that's working fine. The renderItem prop of Flatlist should render every iteration over the data prop, but somehow is taking the whole array as item and getting undefined. — l.legren, Aug 05 '21 at 08:41

score 0 · Accepted Answer · answered Aug 04 '21 at 22:06

0

You are misunderstanding on how React.useState (and rendering) works.

When you call setPosts, it doesn't immediately set posts to the value. It tells React "I want posts to equal <this value>" and React will re-render your component later with the updated state variable.

As for your FlatList not rendering the list, that's another issue. Is it a component you wrote yourself?

answered Aug 04 '21 at 22:06

Kelvin Schoofs

8,323
1
12
31

No, FlatList is a React Native Component, didn't write myself. It works as a pure component, not sure it has something to do with my problem. But I realized that actually the problem is in it. For some reason is taking item as an array instead as an object. Thanks for the explanation – l.legren Aug 05 '21 at 08:39

useState Hook not taking data

1 Answers1