React中异步函数执行完成后如何实现页面重定向？

首先得指出你代码里的核心问题：你更新后的submitSite是一个独立的异步函数，并不是React组件的类方法，所以函数里的this是undefined，调用this.createSite和this.props.history肯定会直接报错——代码在执行到重定向逻辑之前就挂了，自然不会触发页面跳转。另外，你在异步函数内部定义createSite的语法也有问题，会导致语法错误。

下面分几种场景给你对应的解决方案：

场景1：类组件中使用 #

如果你的表单是类组件，需要把submitSite作为组件的类方法，同时确保this的指向正确，还要用withRouter高阶组件包裹组件来获取history对象：

import { API } from "aws-amplify";
import React, { Component } from "react";
import { withRouter } from "react-router-dom";

class YourForm extends Component {
  // 用箭头函数自动绑定this
  createSite = (site) => {
    return API.post("notes", "/notes", { body: site });
  };

  submitSite = async (values) => {
    try {
      await this.createSite({ content: values });
      // 现在能正确拿到history对象了
      this.props.history.push("/");
    } catch (e) {
      alert(e.message || "表单提交失败");
    }
  };

  render() {
    return (
      <form onSubmit={(e) => {
        e.preventDefault();
        // 这里替换成你获取表单值的逻辑
        const formValues = {};
        this.submitSite(formValues);
      }}>
        {/* 你的表单元素 */}
      </form>
    );
  }
}

// 用withRouter包裹，让组件能拿到history props
export default withRouter(YourForm);

场景2：函数组件中使用 #

如果是函数组件，直接用React Router的useHistory钩子获取history对象，更简洁：

import { API } from "aws-amplify";
import React from "react";
import { useHistory } from "react-router-dom";

const YourForm = () => {
  const history = useHistory();

  const createSite = (site) => {
    return API.post("notes", "/notes", { body: site });
  };

  const submitSite = async (values) => {
    try {
      await createSite({ content: values });
      history.push("/");
    } catch (e) {
      alert(e.message || "表单提交失败");
    }
  };

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      const formValues = {};
      submitSite(formValues);
    }}>
      {/* 你的表单元素 */}
    </form>
  );
};

export default YourForm;

场景3：submitSite必须是独立工具函数 #

如果因为业务需求，submitSite需要作为独立的工具函数，那你需要把history对象作为参数传入：

// utils/submitSite.js
import { API } from "aws-amplify";

export default async function submitSite(values, history) {
  try {
    await API.post("notes", "/notes", { body: { content: values } });
    history.push("/");
  } catch (e) {
    alert(e.message || "表单提交失败");
  }
}

// 在组件中调用
import submitSite from "./utils/submitSite";
import { useHistory } from "react-router-dom";

const YourForm = () => {
  const history = useHistory();

  const handleSubmit = (e) => {
    e.preventDefault();
    const formValues = {};
    submitSite(formValues, history);
  };

  return <form onSubmit={handleSubmit}>{/* 表单元素 */}</form>;
};

另外提一句：你之前尝试window.location.replace()无效，大概率也是因为代码报错没执行到那一步。可以先在try块末尾加个console.log("提交成功")，验证请求是否真的成功了——比如你之前的代码里，第一个请求是API.post("sites", "/sites")，后来改成了"notes", "/notes"，要确认接口路径是否正确。

内容的提问来源于stack exchange，提问作者TiernO