Javascript 在提取完成之前发生重定向

我在重定向回上一页时没有什么问题——这发生得太快了

基本上我有这样的功能组件：

export const CreateRecordingControls = ({ recording, handleCreateRecording }) => {
  const history = useHistory();

  const handleCreate = async () => {
    const promise = Promise.resolve(handleCreateRecording(recording));
    await Promise.all([promise]).then(function () {
      history.push('/home');
    });
  }

  return (
    <Fragment>
      <button onClick={() => handleCreate()}>Create</button>
    </Fragment>
  );
}

const mapDispatchToProps = dispatch => ({
  handleCreateRecording: recording => {
    dispatch(handleCreateRecording(recording));
  }
});

const CreateRecordingControlsView = withRouter(connect(null, mapDispatchToProps)(CreateRecordingControls));

export default CreateRecordingControlsView;

这是到减速器：

export default (state = [], action) => {
  switch (action.type) {
    case 'CREATE_RECORDING_BEGIN':
      return {
        ...state,
        loading: true,
        error: null,
        finished: false
      }
    case 'CREATE_RECORDING_SUCCESS':
      return {
        data: action.payload,
        loading: false,
        finished: true
      }
    default:
      return state;
    }
  }

但在这种情况下，它仍然显示“/home”路由上的组件将在调用handlesuccess之前装载。Home组件包含刚添加的录制的列表。目前看来，谁先到达那里是一场竞赛。到目前为止，新创建的录音在列表中，但我认为这仍然是错误的行为

---

如何在重定向之前等待成功案例完成

分派函数不会返回承诺，因此您不必等待任何东西。使用

redux-thunk

如果要等待分派结果，则必须在动作创建者中执行此操作：在此处分派

handleCreateRecordingSuccess

---

另一种方法是观察状态值

finished

，当它获得您感兴趣的值时，将其推送到您的历史记录中。

获取承诺此时似乎没有返回，因此promise.resolve将立即发生

---

我会尝试从获取中返回实际承诺，即等待handleCreateRecording获取的结果，然后在发送操作时返回该结果。承诺、决心和承诺。这一切都不是必需的。如果您想捕获任何获取错误，那么您可以将等待包装在try/catch块中。

handleCreateRecording（recording）

立即返回，这意味着

Promise。所有（[Promise]）

都将在AJAX调用完成之前解决，您必须等待

finished

设置为

true

（使用

MapStateTops

）。我曾尝试在MapStateTops中使用“finished”，但在这种情况下，它存储在store中，当我返回该组件时，它已为“true”，并立即重定向回上一页。可能确实需要等待内部操作创建者。当用户导航离开该页时，您可以将其标记为

false

我想重新定向，或者在其他时候。哦，真的。不知怎么的，我想得太多了。谢谢！

export default (state = [], action) => {
  switch (action.type) {
    case 'CREATE_RECORDING_BEGIN':
      return {
        ...state,
        loading: true,
        error: null,
        finished: false
      }
    case 'CREATE_RECORDING_SUCCESS':
      return {
        data: action.payload,
        loading: false,
        finished: true
      }
    default:
      return state;
    }
  }