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

Question

我正在使用 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";

这看起来有点老套。此外，我无法将对象传递到下一页，我在执行提交的页面上有（“数据”对象是理想情况下我想传递到下一页的对象）。因此，当重定向页面加载时，我不得不执行另一个获取调用以再次检索该对象。

Answer 1

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

您可以按照中所述使用 localStorage/sessionStorage。
或者您使用 React Context 或 Redux 将对象存储在跨应用程序共享的全局状态中

React、路由和传递对象：

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

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 .

的信息

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

After submitting my React form, is there an easier way of passing an object to the page I want to redirect to?

redirect

form-submit

fetch

reactjs