将数据从一个屏幕传递到另一个React-native

问题描述

我正在尝试将数据从一个屏幕传递到另一个屏幕。

我的问题是第一个屏幕转到日历，当我完成将日期放入日历后，我提交并返回到第一个屏幕，问题是在以下情况下第一个屏幕没有重新加载我回过头去，所以我认为数据没有被加载。

第一个屏幕：“ Mytrips” =我单击并转到日历

日历：我通过onPress发送所需的2个数据

  <TouchableOpacity
      style={styles.touchable2}
      onPress={() => this.props.navigation.navigate("MyTrips",{selectedStartDate: selectedStartDate,selectedEndDate: selectedEndDate })}
  ></TouchableOpacity>

现在，我回到MyTrips，将数据恢复设置为以下状态：

this.state = {
      selectedStartDate: props.navigation.state.params && props.navigation.state.params.selectedStartDate
        ? props.navigation.state.params.selectedStartDate
        : "",selectedEndDate: props.navigation.state.params && props.navigation.state.params.selectedEndDate
        ? props.navigation.state.params.selectedEndDate
        : "",

，我想在屏幕上显示它：

<Text>{this.state.selectedStartDate}{this.state.selectedEndDate}</Text>

但是，没有任何显示。我认为这是因为当我返回第一个屏幕时，状态不会用我传递的数据进行更新。 有谁可以帮助我吗？我想我已经快要开始工作了，但是...我错过了一些东西。谢谢您的帮助

解决方法

请注意，这是因为this.state.selectedStartDate组件更改this.state.selectedEndDate和Calendar时selectedStartDate和selectedEndDate将不会更新。在this.state = {...中，您只是在第一次加载组件时将道具复制到状态。要使用新值更新状态，建议您在componentDidUpdate组件中使用MyTrips。像这样：

componentDidUpdate(prevProps,prevState) {
   // here you could write: 
   // if (prevProps !== this.props) {
   //     this.setState with this.props
   // }
}