时间戳

首页 > 解决方案 > 提交我的 React 表单后，是否有更简单的方法将对象传递到我要重定向到的页面？

reactjs - 提交我的 React 表单后，是否有更简单的方法将对象传递到我要重定向到的页面？

问题描述

我正在使用 React 16.13.0。我有以下处理程序用于将我的 React 表单提交到其端点...

  const handleFormSubmit = (e) => {
    ...
     fetch(REACT_APP_PROXY + "/coops/", {
      method: "POST",
      body: JSON.stringify(NC),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          throw response; 
        }
      })
      .then((data) => {
        const result = data;
        window.location.href = "/" + result.id + "/people";
      }).catch(err => {
        err.text().then( errorMessage => { 
          setErrors({ errors: errorMessage });
        }); 
      });
  };

我想知道是否有更“反应”的方式来重定向到下一页。现在，我在做

window.location.href = "/" + result.id + "/people";

这似乎有点hacky。此外，我无法将对象传递到下一页，我在执行提交的页面上拥有该对象（“数据”对象是理想情况下我想要传递到下一页的对象）。因此，当重定向页面加载时，我被迫执行另一个 fetch 调用以再次检索该对象。

标签： reactjsredirectfetchform-submit

解决方案

反应，在页面加载/位置更改之间传递对象：

  • 您可以按照此处接受的答案中的说明使用localStorage/ 。sessionStorage
  • 或者您使用React Context或 Redux 将对象存储在跨应用程序共享的全局状态中

反应、路由和传递对象：

首先，更新没有错window.location。这是更新当前页面的有效方法。保持原样并使用sessionStorage传递您的对象很可能是解决问题的最快方法。话虽如此，我还是有更优化的解决方案，感觉更像是反应：例如尝试反应路由器。它还允许您通过将对象作为道具向下传递到其他页面来在路由之间传递对象。

react-router-dom 钩子示例：

import { useHistory } from "react-router-dom";

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

...
     .then((data) => {
        const result = data;
        // access state via this.props.location.state.result
        history.push({
           pathname: "/" + result.id + "/people",
           state: {result}
        });
      }).catch(err => {
        err.text().then( errorMessage => { 
          setErrors({ errors: errorMessage });
        }); 
      });
}

在此处查找有关 react-router-dom 的更多信息。

推荐阅读