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

Question

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

我的问题是第一个屏幕转到日历，当我完成将日期放入日历后，我提交并返回到第一个屏幕，问题是第一个屏幕没有当我回去的时候重新加载，所以数据没有加载，我想。

第一个屏幕：“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>

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

Answer 1

再见，发生这种情况是因为当 Calendar 组件更改 selectedStartDate 和 selectedEndDate 时，this.state.selectedStartDate 和 this.state.selectedEndDate 将不会更新。在 this.state = {... 中，您只是在第一个组件加载时将道具复制到状态中。要使用新值更新状态，我建议您在 MyTrips 组件中使用 componentDidUpdate。类似于：

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

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

Passing data from one screen to another React-native

react-native

parameter-passing

screen