useState Hook 不获取数据 [重复]答案

【问题标题】：useState Hook not taking data [duplicate]useState Hook 不获取数据 [重复]
【发布时间】：2021-08-04 22:02:22
【问题描述】：

我正在尝试将状态设置为从 Redux 获得的道具。我有一个数组props.feed，在控制台上显示一个数组。但是将我的状态设置为这个数组并不会改变状态，它仍然是未定义的，并且它不会呈现我的 Flatlist，因为数据是未定义的。

如果我登录props.feed，它就可以工作。如果我在使用setPosts 后记录我的状态posts，则挂钩不会获取数据。

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

这是控制台。

【问题讨论】：

它确实改变了状态，你只是不会通过直接记录它来看到它。 posts 仍将在下一次渲染时更新为该 3 元素数组，这或多或少会立即发生。那么除了console.log 的输出与您的预期不同之外，实际的问题是什么？
问题实际上是Flatlist。它应该在 Flatlist 的 data 属性中获取一个数组，并且在重新渲染时确实从帖子中获取该数组。所以这很好。 Flatlist 的 renderItem 属性应该在 data 属性上渲染每个迭代，但不知何故将整个数组作为项并变得未定义。

标签： javascript react-native use-state

【解决方案1】：

您误解了React.useState（和渲染）的工作原理。

当您调用setPosts 时，它不会立即将posts 设置为该值。它告诉 React “我希望 posts 等于 <this value>”，React 将在稍后使用更新的状态变量重新渲染您的组件。

至于您的 FlatList 不呈现列表，这是另一个问题。是你自己写的组件吗？

【讨论】：

不，FlatList 是一个 React Native 组件，不是我自己写的。它作为一个纯组件工作，不确定它与我的问题有关。但我意识到实际上问题出在它身上。出于某种原因，将 item 作为数组而不是作为对象。谢谢解释