Question

所以我有一个显示产品详细信息的屏幕，它像模板一样工作，因为只有导航参数更改了数据，我遇到了问题，因为没有重新加载，返回并重新安装时工作正常，不是这种情况是因为我在同一屏幕上显示了相关产品，所以我需要一种方法来重新加载当前路线或更新状态

我已经用console.log检查了，第二次点击后什么都没有显示

constructor (props) {
  super(props)
  this.state = {
    product: this.props.route.params.product,
    id: this.props.route.params.product.id,
  }
}

要导航以使用我在屏幕本身或其他路线中使用的路线

viewProduct = (product) => {
  this.props.navigation.navigate('SingleProduct', { product: product })
}

我在componentDidMount和UNSAFE_componentWillReceiveProps内都尝试过setState，但结果仅在再次单击后才会显示

Answer 1

您可以使用以下功能从singleProduction屏幕导航到具有不同参数的同一屏幕。

this.props.navigation.replace('SingleProduct', { product: product })

Answer 2

直接使用 route.params?.product 并在 useEffect 数组中提及更改。

  useEffect(() => {

    return () => {
      // Clean up the subscription
      
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [route.params?.product]);

路线未根据导航参数更新状态

2 个答案: