时间戳

首页 > 解决方案 > 通过 React Native 传递参数的陈旧数据

react-native - 通过 React Native 传递参数的陈旧数据

问题描述

这应该很简单，但它对我不起作用。

我有一个 FlatList 迭代一组位置。FlatList 工作正常，但我无法通过 navigation.navigate 将 id 值传递到另一个屏幕。

我们正在使用功能组件。

这是相关的 FlatList 代码：

            <FlatList
                data={locations}
                keyExtractor={(item) => item.id.toString()}
                renderItem={({ item }) => (

...

            <View style={{ flexDirection: 'column', flex: 1 }}>
                <Text style={styles.items}>{item.name}</Text>
                <Text style={styles.listitem}>{item.addressoneline}</Text>
                <Text style={styles.listitem}>{item.id}</Text>
            </View>

...

            <TouchableOpacity
                style={{ width: 30 }}
                onPress={() => {
                    props.navigation.navigate('AddEditLocation', { locationId: item.id });
                }}
            >
                <Image source={edit2} style={{ width: 20, height: 20, margin: 6 }} />
            </TouchableOpacity>

在我编写的 AddEditLocation 中：

useEffect(
    () => {
        load();
        const unsubscribe = props.navigation.addListener('willFocus', load); // fire on screen load
        return unsubscribe;
    },
    [ props.navigation ]
);

function load() {
    const id = props.navigation.getParam('id'); 
    // *** id contains stale data, is not updated when clicking on different items in the list
}

不知道我在这里出了什么问题。AddEditLocation 中的 id 值不反映 FlatList 行中的值。如果我在 TouchableOpacity 元素的 onPress 方法中提醒 item.id 值，它会显示正确的 item.id 值，因此这使我相信这是传递参数或我们在目标页面中读取参数的方式的问题。

提前致谢。

标签： react-nativenavigation

解决方案

我假设您正在使用React Navigation v4，所以有一个有用的组件调用NavigationEvents来处理这些侦听器。

import { NavigationEvents } from 'react-navigation';

const YourComponent = (props) => {

  const loadItem = () => {
    const id = props.navigation.getParam('id');
  }

  return (
    <MainWrapper>
      <NavigationEvents onWillFocus={loadItem} />
      <YourComponent />
    </MainWrapper>
  )
}

推荐阅读