Question

我有2个屏幕，分别是listProducts和detailProduct。当我从列表中导航到详细信息时，我会获得有关该产品的所有信息。所以我想在屏幕的标题上显示产品名称。我已经做了这种方法

DetailProduct.js：

componentWillReceiveProps(nextProps){
   if(nextProps.product.name !== undefined)
       this.props.navigation.setParams({ Name:  nextProps.product.name })
}

Navigator.js：

detailProduct: {
  screen: detailProduct,
  navigationOptions: ({ navigation }) => 
   ({title:navigation.getParam('Name', 'DefaultName'),})
}

但是我得到这个错误： [不变违反：超出最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。 React限制了嵌套更新的数量，以防止无限循环。] 知道我使用redux。 Pleace如何解决此问题，如何使标题的标题动态化。谢谢

Answer 1

似乎您需要将条件从if(nextProps.product.name !== undefined)更改为if(nextProps.product.name !== undefined && nextProps.product.name !== this.props.navigation.getParam('Name'))。

否则，您将每次更改状态。

Working demo

如何使屏幕标题动态化？

1 个答案: