Question

我正在学习React Native和Redux，并且我已经开始使用第三方库 - 特别是React Navigation。

我有两个屏幕，Main Screen和Alarm Setup Screen。 Main Screen有一个警报列表，Alarm Setup Screen包含警报的详细信息，并提供编辑其详细信息的可能性（小时，重复，启用等）。我在Main Screen上有一个按钮来创建一个新警报。当用户按下按钮时，用户被重定向到Alarm Setup Screen并且必须创建新警报。新警报已经默认填充了所有参数，并且已添加到redux状态。我在Alarm Setup Screen（Save和Cancel）上也有两个按钮。如果用户按下Cancel按钮，我会删除创建的新警报，并使用goBack()中的React Navigation功能。

问题是当用户按下Cancel上的创建新警报按钮后按下Main Screen按钮。如果我从Redux状态删除新创建的警报，则会出现错误，因为屏幕会尝试渲染并且警报不再存在。发生这种情况是因为在触发goBack()函数之前状态已更改。

cancelAlarmEditButton() {
  const alarmToDelete = this.props.alarmSetup.deleteNewAlarm;
  const {goBack} = this.props.navigation;
  goBack();
  this.props.dispatchDeleteCurrentAlarmState(alarmToDelete.id);

}

由于我无法找到解决此问题的方法，因此我尝试更新Redux上的Main Screen州。这没有任何错误，但删除警报时不会更新警报列表。

checkAlarmToDelete() {
  const alarmToDelete = this.props.alarmSetup.deleteNewAlarm;
  if (alarmToDelete && alarmToDelete.delete) {
    this.props.dispatchDeleteCurrentAlarmState(alarmToDelete.id);
  }
}

componentDidUpdate() {
  this.checkAlarmToDelete();
}

如果我更新Redux中的Alarm Setup Screen状态，则会收到错误消息。如果我更新Main Screen状态不正确。

//Reducer code:
case DELETE_ALARM: {
      const {id} = action.payload;
      const alarmsData = state.alarmsData.filter(val => val !== id)
      const mergedState = state.merge({
        deleteNewAlarm: undefined,
        alarmsData: {
          [id]: undefined,
        },
      }, { deep: true })

      return saveState(mergedState)

      return state;

基本上，我想了解使用Redux功能管理React Navigation州和goBack()的最佳方式。

有没有人能解决我的问题？

Answer 1

我只是设法解决我的问题。在更新redux状态之前，我只需更改render函数以返回一个空的View。

cancelAlarmEditButton() {
  const {goBack} = this.props.navigation;
  const {alarmId, newAlarm} = this.props.navigation.state.params;
  if (newAlarm) {
    this.render = () => {
      return (<View/>)
    }
    this.props.dispatchDeleteCurrentAlarmState(alarmId);
  }
  goBack();
}

这样，如果报警对象不再存在则没有问题。

使用React navigation goBack（）函数管理Redux状态

1 个答案: