React Native - 将状态传递到另一个屏幕答案

【问题标题】：React Native - Passing state to another screenReact Native - 将状态传递到另一个屏幕
【发布时间】：2021-06-26 10:33:49
【问题描述】：

所以我想将一个状态传递给屏幕。当我控制台记录它时，它非常好，但是当我更新状态时它不会动态更新。

我的主屏幕

useEffect(() => {
        // SNAPSHOT USER DATA
        db.collection("users").doc(currentUserUID)
        .onSnapshot((doc) => {
            setUserData(doc.data());
        });
    }, [])

比我传递给它

<FlatList
                    horizontal
                    style={{ marginBottom: 40 }}
                    data={trackscreenData.ModulePbs1}
                    showsHorizontalScrollIndicator={false}
                    keyExtractor={(item) => item.TrackId}
                    renderItem={({ item }) => {
                        return (
                            <TouchableOpacity onPress={() => {
                                navigation.navigate('Module', {
                                    TrackId: item.TrackId,
                                    userData: userData,
                                });
                            }}>

然后在我的“模块”屏幕上导入状态

export const ModuleScreen = ({navigation, route}) => {
const userData = route.params.userData;
} console.log(userData)
return()

所以当我更新我的状态时，它会在我的主屏幕上更新，而不是在我的模块屏幕上。

我做错了什么？

【问题讨论】：

标签： javascript firebase react-native

【解决方案1】：

在路由中将 userData 作为参数传递，如果 userData 从主屏幕更新，则不会使 Modulescreen 中的 userData 发生更改。

如果你想这样做，你需要使用状态管理。

【讨论】：

【解决方案2】：

您能否确认 Flatlist 正在获取更新的数据。为此放置一个控制台并确保您在 renderItem 中接收到更新。如果没有尝试添加extraData 属性。另外，如果您有兴趣，请通过React Native Firebase doc。

【讨论】：