[组件在React Native中渲染后未显示更改

Question

这里是React Native的新手。我正在尝试将Redux用于React Native的移动应用程序。有几个组件（应用程序屏幕）。我正在从一个屏幕（具有项目列表）中选择项目，并将其提供给下一个作为参数以显示其详细信息。当我第一次这样做时，一切都是正确的。但是，如果我在列表屏幕中选择另一个项目，则第二个屏幕将不会显示正确的项目详细信息。而是显示先前选择的项目的详细信息。

第一个屏幕提供该项目并进行导航：

this.props.navigation.navigate('DetailsScreen', { item: item.value } );

第二屏幕：

class DetailsScreen extends Component{
  constructor(props) {
      super(props);
      this._item = this.props.navigation.getParam(‘item’);
  }

  componentDidMount() {
    this.props.dispatchData(this._item);
  }


  render(){
    return (
      <View>
        <SectionList
          sections={this.props.layout}
          stickySectionHeadersEnabled={false}
          renderItem={({item}) => (
              <ListItem
                title={item.title}
              />
          )}
          renderSectionHeader=
          {
            ({section}) => (
            <ListItem
                bottomDivider={true}
              />)
          }
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}


const mapStateToProps = state => {
  return {
    layout: state.detailsReducer.layout,
  };
};



  const mapDispatchToProps = {
    dispatchData:  (item) => getLayout(item)
  }

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(DetailsScreen);

[奇怪的是，我从日志中看到呈现了新的布局（来自新选择的项目），这意味着使用正确的最新数据调用DetailsS​​creen中的render()函数。但我在屏幕上看不到那些更改。我想念什么？是否因为导航而保存了屏幕的前一个实例？还是其他？

Answer 1

这是因为导航会保存屏幕的先前实例吗？或者是其他东西？

答案是肯定的，反应导航，它的作用是如果您对页面执行navigation.navigate('home')，那么它将第一次使用每种生命周期方法来呈现它，但是第二次使用该方法。时间它不调用componentDidMount，因为它已从导航堆栈中获取。您可以尝试使用

this.props.navigation.push('DetailsScreen', { item: item.value } ); 

每次调用时，它将把屏幕推到栈顶。

希望它有助于消除疑惑