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

Question

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

我有一个 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 值，所以这让我相信这是传递参数或我们读取参数的方式的问题目标页面。

提前致谢。

Answer 1

我假设您正在使用 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>
  )
}

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

Stale data passing params via React Native

navigation

react-native