在 React 中提交后重定向

Posted 2023-02-22

【中文标题】在 React 中提交后重定向

【英文标题】：Redirect after submit in React

【发布时间】：2019-04-09 18:40:53

【问题描述】：

在我的反应应用程序中按下提交按钮后，我试图重定向用户，但重定向从未发生。提交按钮后，我通过 axios 将数据发送到 API，然后我想重定向。这是通过首先在我的构造函数中将重定向的状态设置为 false 来完成的，在发送 axios 调用之后，我试图将其状态设置为 true，然后如果值为 true，则有条件地呈现反应路由器重定向。

我已经确认 Axios 实际上是向后端发送数据的。但不知道为什么在值设置为 true 后条件渲染不运行。有任何想法吗？ :)

我的代码：

import React from 'react';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import axios from 'axios';
import  Redirect  from 'react-router';

class confirmWithdraw extends React.Component 
  constructor() 
    super();
    this.state = 
      redirect: false
    ;

    this.handleSubmit = this.handleSubmit.bind(this);
  

  handleEvent = e => 
    this.setState( [e.target.name]: e.target.value );
  ;

  handleSubmit = e => 
    e.preventDefault();
    const amount = sessionStorage.getItem('amount');
    const serverCardNumber = sessionStorage.getItem('cardnumber');
    axios(
      method: 'post',
      url: '/api/whidrawal',
      data: 
        amount,
        serverCardNumber
      
    ).then(() => this.setState( redirect: true ));
  ;

  render() 
    const  redirect  = this.state;
    if (redirect) 
      return <Redirect to="/moneyform" />;
    
    return (
      <React.Fragment>
        redirect ? <Redirect to="/moneyform" /> : null
        <div>
          Select action -> Withdraw -> <b>Confirm -></b> Take cash -> Finished? -> Take card' '
        </div>
        <div>sessionStorage.getItem('amount')</div>
        <h1>Please confirm the withdraw of sessionStorage.getItem('amount') NOK </h1>
        <CssBaseline /> /*https://material-ui.com/style/css-baseline */
        <form onSubmit=this.handleSubmit>
          <br />
          /* Bytt ut med CSS block elementer eller noe slikt, bytt name på form fields til å hentes via JS  */
          <div className="container">
            <Button type="submit" variant="contained" color="primary" className="floatRight">
              Confirm
            </Button>
            <Button type="submit" variant="contained" color="secondary" className="floatLeft">
              Cancel
            </Button>
          </div>
        </form>
      </React.Fragment>
    );
  

export default confirmWithdraw;

【问题讨论】：

您能否确认该组件在您提交后重新渲染？

后端是否以状态 200 响应？

通过与withRouter HOC、export default withRouter(confirmWithdraw); 连接来导出组件另外作为约定，您的 React 组件名称必须以大写字符开头

你确定.then(() => this.setState( redirect: true )); 真的被执行了吗？这篇文章的答案可能会解决您的问题，但是您的原始方法还可以，肯定有其他东西不起作用。

【参考方案1】：

假设您使用的是 react-router v4，您将希望使用历史对象进行导航。

import  withRouter  from 'react-router';
...

handleSubmit = () => 
  ...
  this.props.history.push('/moneyform');


render() 
  return (
    <ReactFragment>
      <div>
      ...
    </ReactFragment>
  )



export default withRouter(confirmWithdraw);

【讨论】：

这是一种可能的解决方案，但使用的 OP 也应该理想地工作

@ShubhamKhatri，我猜 仍然需要 withRouter。

@emil，如果您有 Redirect 的组件正在获取路由器道具，则不需要 withRouter。 ***.com/questions/44009618/…回答我前段时间写的其实会更详细的解释一下