Question

我有一个表单，提交后将在我的MongoDB数据库中创建一个新条目。

但是，在执行此操作后，我希望此新条目显示在“重定向”页面上。但是-而不是“刷新”页面，它只是重定向，页面的外观与上次离开页面时的外观相同。

所以我的问题是，我该如何重构代码，以便在提交表单时重定向也可以刷新重定向页面？

这是我的提交代码：

Param(
    [String] $Param1 =@("Param1"),
    [String] $Param2 =@("Param2")
)
    $ScriptLocation = Split-Path $script:MyInvocation.MyCommand.Path -Parent
    Write-Host $ScriptLocation

$RunAs32Bit = {
    Param(
    [String] $Param1 =@("Param1"),
    [String] $Param2 =@("Param2")
    )
    ...        

    return $Result  
}

#Run the code in 32bit mode if PowerShell isn't already running in 32bit mode
If($env:PROCESSOR_ARCHITECTURE -ne "x86"){
    Write-Warning "Non-32bit architecture detected, processing original request in separate 32bit process."
    $Job = Start-Job $RunAs32Bit -RunAs32 -ArgumentList ($Param1, $Param2, $ScriptLocation)
    $Result = $Job | Wait-Job | Receive-Job
}Else{
    $Result = Invoke-Command -ScriptBlock $RunAs32Bit -ArgumentList ($Param1, $Param2, $ScriptLocation)
}

我假设这是因为它是“ this.props.history”，所以它返回原始页面。对我来说，重构此重定向以在表单提交时重新加载页面的最佳方法是什么？

任何帮助将不胜感激。谢谢！

EDIT：呈现表单提交的仪表板组件。我正在移动设备上执行此操作，因此希望可以！

  onSubmit = (e) => {

    e.preventDefault();

    axios.post("/api/submitDebt", {
      creditCard: this.state.creditCardToggled,
      personalLoan: this.state.personalLoanToggled,
      provider: this.state.provider,
      balance: this.state.balance,
      limit: this.state.limit,
      monthly: this.state.monthly,
      interest: this.state.interest,
      borrowed: this.state.borrowed
    })

    this.props.history.push('/dashboard');
  }

另一个编辑：使用React Router for Dashboard组件添加了我的路线。

class IndividualDebts extends Component {
  constructor(props) {
    super(props)

    this.state = {
      debts: []
    }

  }

  componentDidMount() {
    axios.get("/api/fetchDebtCards")
    .then((response) => {
      this.setState({ debts: response.data })
    })
    .catch(e => {
      console.log(e)
    })
  }

  render() {

    const fetchDebts = this.state.debts.map (debt => {

      return (

       <IndividualDebtCard key={debt._id}
        picture={(`../images/${debt.provider}.jpg`)}
        provider={debt.provider}
        type={debt.creditCard === 'true' ? "Credit Card" : "Personal Loan" }
        balance={debt.balance}
        limit={debt.creditCard === 'true' ? debt.limit : debt.borrowed}
        monthly={debt.monthly}
        interest={debt.interest} />

            )
        })

    return (
      <div>
        <section className="individual-debts-section">
          <div className="individual-debts-container">

              {this.state.debts.length === 0 ?

                <div className="no-debts-container">

                <h3>There are no debts linked yet. Why not try adding one now?</h3>

                <ActionButton link="link-debt" type="button" text="Link debt" />

                </div>  : <div className="individual-debts-card-container">{fetchDebts}</div>  }

          </div>
        </section>
      </div>
    )
  }
}

export default IndividualDebts;

Answer 1

我认为问题在于您在导航至仪表板之前没有等待axios调用（异步）完成。也许尝试使用异步/等待之类的东西：


  onSubmit = async (e) => {

    e.preventDefault();

    await axios.post("/api/submitDebt", {
      creditCard: this.state.creditCardToggled,
      personalLoan: this.state.personalLoanToggled,
      provider: this.state.provider,
      balance: this.state.balance,
      limit: this.state.limit,
      monthly: this.state.monthly,
      interest: this.state.interest,
      borrowed: this.state.borrowed
    })

    this.props.history.push('/dashboard');
  }

或者，您可以像下面这样使用then / catch块：


  onSubmit = (e) => {

    e.preventDefault();

    await axios.post("/api/submitDebt", {
      creditCard: this.state.creditCardToggled,
      personalLoan: this.state.personalLoanToggled,
      provider: this.state.provider,
      balance: this.state.balance,
      limit: this.state.limit,
      monthly: this.state.monthly,
      interest: this.state.interest,
      borrowed: this.state.borrowed
    })
    .then(()=> this.props.history.push('/dashboard'))
    .catch(()=> console.log("error in posting data"));

  }

Answer 2

如果您已经按照您的说明在装载时装载数据，我会看到2个可能的问题：

第一个是您在重定向之前不等待异步请求返回。为此，只需添加await：

onSubmit = async (e) => {

    e.preventDefault();

    await axios.post("/api/submitDebt", {
      creditCard: this.state.creditCardToggled,
      personalLoan: this.state.personalLoanToggled,
      provider: this.state.provider,
      balance: this.state.balance,
      limit: this.state.limit,
      monthly: this.state.monthly,
      interest: this.state.interest,
      borrowed: this.state.borrowed
    })

    this.props.history.push('/dashboard');
  }

另一个问题是您没有在每次更改路线时都卸载和安装组件。尝试将您的路线选择更改为：

<Route path="/dashboard" render={props => <Dashboard {...props} />} />

当您使用render而不是component时，每次将路径更改为Dashboard时，路由将重新呈现'/dashboard'，这意味着您的componentDidMount将每次运行

Answer 3

如果您使用的是类组件，则可以在挂载'/ dashboard'组件时尝试获取数据

componentDidMount() {
  fetchData()
}

在React前端中提交表单时重定向和刷新页面

3 个答案: