如何在 Reactjs 功能组件 history.push 中使用答案

【问题标题】：how to use in Reactjs functional component history.push如何在 Reactjs 功能组件 history.push 中使用
【发布时间】：2020-06-16 08:52:18
【问题描述】：

我有一个具有形式的功能组件。 Onsubmit 呼叫我想重定向到另一个页面。

function ProfileForm(props) {
 // many code removed
 const onSubmit = (data, e) => {
   e.target.reset();
   history.push({
  pathname:  "/OnSubmit",
  state: {
    response: messageFromServer 
   } 
  }
}
// many code removed
}

我收到了这个错误：-

“历史”无限制全局变量的意外使用

在谷歌搜索错误后，我找到了类似的位置答案。答案是： Try adding window before location (i.e. window.location). 所以我尝试了：-

  window.history.push({
  pathname:  "/OnSubmit",
  state: {
    response: messageFromServer 
  } 
}

出现新错误：-

未处理的拒绝（TypeError）：window.history.push 不是函数

【问题讨论】：

试试window.history.pushState()。

标签： reactjs push history

【解决方案1】：

我认为您使用react-router 处理路由。如果是这样，您需要使用通过ReactRouterContext 传递的历史对象。为此，您需要使用useHistory 挂钩来获取history 对象。

// ...
import { useHistory } from "react-router";
// ...


function ProfileForm(props) {
  const history = useHistory();
  const onSubmit = (data, e) => {
     e.target.reset();
     history.push({
        pathname:  "/OnSubmit",
        state: {
          response: messageFromServer 
        } 
     });
  }
}

【讨论】：

是的，它有效。但是还有另一个问题。在这个电话之前，我发出一个帖子请求：axios.post('http://localhost:8080/profile', profile) .then(res => { setMessageFromServer(res.data) }).catch((error) => { // handle this error setMessageFromServer(error.data) }) 我想得到这个响应并发送到 OnSubmit 页面。我该如何等待这个回复？
在不了解您的路由和状态管理架构的情况下推荐一些东西有点困难。您可以将状态提升到ProfileForm 和OnSubmitPage 的第一个共同父级，将回调属性传递给ProfileForm，称为onSuccess，并像axios.post('http://localhost:8080/profile', profile).then(res => { onSuccess(res.data); history.push("/onSubmit"); })... 一样使用它。然后，共同父母可以将此状态传递给OnSubmitPage。
如果您使用的是redux 或mobx，那就完全是另一回事了，还有很多不同的解决方案。您可以使用contextAPI。您甚至可以简单地将数据写入sessionStorage，重定向到OnSubmitPage 并从存储中读取值。这完全取决于您的架构。
处理 API 响应是 React 中的一个大话题。有简单的方法、高级的方法和“难以维护”的方法。您可以使用redux 或mobx，但由于复杂性及其负面影响，最近一些社区正在远离它们。也有人试图将 UI 状态与 API 状态分开。他们说像isDarkTheme、isDrawerOpen 这样的 UI 状态应该存储到一个单独的存储区，与保存 API 响应的存储区分开（这只是成为一个缓存）。您也可以查看swr 和react-query。就像我说的。很多选择。
我没有使用 redux 或 mobx。我只需要等到我得到服务器的响应。我将尝试遵循您的回调解决方案。

【解决方案2】：

如果你在你的功能组件中使用import { withRouter } from "react-router-dom";，你是不是缺少props.history.push？

【讨论】：

【解决方案3】：

您可以使用 useHistory()。以下代码可以帮助您。

import { useHistory } from "react-router";

export default function Checkout(props) {
    
const history = useHistory();
 
return (
              <React.Fragment>
                <AddressForm history ={ history} ></AddressForm>
              </React.Fragment>
        </Paper>
      </main>
    </React.Fragment>
  );
}

【讨论】：