如何在 React 中将结果数据从一个页面发送到另一个页面

Posted 2023-02-23

【中文标题】如何在 React 中将结果数据从一个页面发送到另一个页面

【英文标题】：How to send result data from one page to another page in React

【发布时间】：2021-01-30 08:10:27

【问题描述】：

在计算表单上，可以显示结果，但我想要的是当用户单击“计算保存范围”按钮时，它将链接到另一个页面并显示结果。我尝试将数据从Calculate.js 发送到Result.js，但它不起作用

我的代码在这里：https://codesandbox.io/s/calculation-form-uxip8?file=/src/components/Calculator.jsx

在 Result.jsx 上

import React, Component from 'react';

import NavLink  from "react-router-dom";


class Result extends Component 
    
    render()
        return(
            <div className="result">
                <h2>You could save between</h2>
                <h1>this.props.value</h1>
               <NavLink to="/">Use Calculator Again</NavLink>

            </div>

        )
    


export default Result

任何人都可以过来给我一些帮助。非常感谢。

【参考方案1】：

您可以简单地将数据与路由推送/替换一起传递。

在现有实现中使用重定向组件

<Redirect
  to=
    pathname: "/result",
    state: 
      value:
        "$" +
        Math.floor(1.69 * this.state.square * (10 / 100)) +
        "- $" +
        Math.floor(1.69 * this.state.square * (30 / 100))
    
  
/>

由于您的组件直接由Route 组件渲染，因此它们被传递route props。这意味着Calculator 可以访问history 属性来强制重定向，Result 可以访问location 属性来获取路由状态。

计算器.js

更新提交处理程序以重定向到“/result”路由并传递状态。使用Result 删除返回末尾的div，您不需要在此页面上使用它。如果您希望用户能够返回表单，请使用 history.push。

handleSubmit = (event) => 
  event.preventDefault();
  this.props.history.replace(
    pathname: "/result",
    state: 
      value:
        "Your saving range is: $" +
        Math.floor(1.69 * this.state.square * (10 / 100)) +
        "- $" +
        Math.floor(1.69 * this.state.square * (30 / 100))
    
  );
;

结果.js

只需要访问路由状态props.location.state.value即可。

class Result extends Component 
  render() 
    return (
      <div className="result">
        <h2>You could save between</h2>
        <h1>this.props.location.state.value</h1> // <-- route state
        <NavLink to="/">Use Calculator Again</NavLink>
      </div>
    );
  

重要

确保您的路由和应用代码包含在路由器中！交换路线的顺序，以便您指定更具体的路线在不太具体的路线。这样Switch 可以先尝试匹配更具体的路线，然后再回退到不太具体的路线。

...
import  Switch, Route, BrowserRouter as Router  from "react-router-dom";
...

function App() 
  return (
    <div className="App">
      <Router> // <-- need to wrap app in Router so routes work correctly
        <Switch>
          <Route path="/result" component=Result />
          <Route path="/" component=Calculator />
        </Switch>
      </Router>
    </div>
  );

【讨论】：

太棒了。太感谢了。这让我学到了很多东西！

@Sunny 再次欢迎您。如果它解决了您的问题，请接受答案，如果解释有帮助，请点赞。干杯。

您好，您知道如何弹出模态显示结果数据而不是页面结果的链接吗？我的代码在这里codesandbox.io/s/calculation-form-uxip8?file=/src/components/…

@Sunny 通常最好在 SO 上提出一个新问题，因为这与这个问题无关；您可以发表评论以寻求有关新问题的帮助并提供该问题的链接。话虽如此，我尝试了您的沙箱，看来您已正确连接模式以打开和呈现this.state.value。我误解了你的新问题吗？

我已经弄明白了。非常感谢！

【参考方案2】：

在 React 中，当您希望两个组件一起通信时，它们的一个共同祖先中必须有一个状态。

在您的应用中，Calculator 和 Result 的共同祖先是 App，因此您应该在 App 中有一个状态。

function App() 
  const [result,setResult] = useState(null)
  return (
    <div className="App">
    <Switch>
      <Route exact path="/" component=() => <Calculator setResult=setResult/> />
      <Route path="/result" component=() => <Result result=result/> />
    </Switch>
    </div>
  );

然后，Calculator 可以在内部调用setResult 来修改result，然后Result 可以读取。

另一种选择是使用 Redux。