React Native、Redux 和 Navigation：从导航传递参数时处理状态更新

Question

我有一个带有组件的应用程序，它将帖子数组（记录、行或任何你喜欢的）从 redux 切片映射到按钮以导航到详细信息组件，导航操作传递帖子参数，以便详细信息组件接收它。

// ParentComponent.js
// Redux selector
const posts = useSelector((state) => state.posts);

// The array is mapped like this
posts.map((post, index) => {
  return (
    <TouchableOpacity
      onPress={() => {
        navigation.navigate('TabNavigation', {
          screen: 'PostEditor',
          params: {post},
        });
      }}
      key={Post.slug}
      <PostDetail post={post} />
    </TouchableOpacity>
  );
});

一个post视图由一个大表单组成，所以我不得不将detail组件分成多个部分（子组件），这意味着我将接收到的参数传递给子组件：

// Detail View / PostEditor
const {post} = route.params;

return (
    <SafeAreaView>
      <ScrollView>
        <View style={styles.block}>
          <PostFormOne post={post} />

          <PostFormTwo post={post} />

          <PostFormThree post={post} />

          <PostFormFour post={post} />
        </View>
      </ScrollView>
    </SafeAreaView>
);

问题是当我对每个子组件的 redux 存储进行更改时，其他组件没有更新，我猜是因为子组件引用了导航参数post而不是 redux 帖子存储。

如果是这样，那么我的问题是您将如何使用导航参数引用 redux 存储？

如果这不正确，那么对此功能的更好方法是什么？

提前致谢。

Answer 1

您为所选帖子创建另一个存储变量以及更新当前帖子的操作。 然后在您的 TouchableOpacity onPress 中，您调用操作来更新当前帖子。

    <TouchableOpacity
      onPress={() => {
        navigation.navigate('TabNavigation', {
          screen: 'PostEditor',
        });
       dispatch(updateCurrentPost(post));
      }}
      key={Post.slug}
      <PostDetail post={post} />
    </TouchableOpacity>

这样，您根本不需要传递帖子，只需执行以下操作：

useSelector((state)=> state.currentPost);

在您的所有子组件中。 您需要在所有子组件中调用 updateCurrentPost 操作以保持当前帖子同步。