reactjs - 当用户从标题中单击 navigation.goback 时如何重置所有路由参数？

Question

在进入之前，params issue我想先解释一下我的情况。

我有一个productlist页面和productdetails页面。

当我想从 to 导航时productlist，productdetails A我使用navigation.navigate.

navigation.navigate('CaseDetails', {
                screen: 'CaseDetails',
                params: {
                    title: info.title,
                    summary: info.summary,
                },
            })

当我从productdetails A到productdetails B我使用navigation.push

navigation.push('CaseDetails', {
            screen: 'CaseDetails',
            params: {
                title: item.title,
                summary: item.summary,
            },
        });

事情是在我的 caseDetails 页面中，我得到了 2 组参数数据。

---

当我从productlist到productdetails A

参数位于route.params

---

当我从productdetails A到productdetails B

参数位于route.params.params

因此，为了显示正确的数据，我通过设置这样的条件来显示数据

{route.params?.params?.title === undefined
        ? renderPageView(route.params)
        : renderPageView(route.params?.params)}

这是 renderPageView 函数

const renderPageView = (item) => {
    return (
      <View>
        <View style={globalStyle.articleLandingContainer}>
          <View style={globalStyle.articleLandingOverlay}></View>
          <Text style={styles.landingText}>{item.title}</Text>
          <Text style={styles.landingPara}>{item.summary}</Text>
        </View>
        </View>
      </View>
    );
  };

所以最初的循环是页面很好。但在绕行的第二圈

当从productlist到仍然存在productdetails Aroute.params?.params?.title

因此，该应用程序向我显示了来自 productdetails B而不是 productdetails A.

所以在我的抽屉导航器中。我尝试像这样重置参数，但它什么也没做

clearParams = () => {
     navigation.setParams({
       title: undefined,
       summary: undefined,
     });
  };

<Icon.Button
         name="arrow-left"
         size={25}
         backgroundColor={headerColor}
         onPress={() => {
          navigation.goBack(), clearParams();
 }}></Icon.Button>

我应该怎么做才能使它起作用

标签： reactjsreact-nativereact-navigation