Reactjs 在React frontend中重定向和刷新表单提交页面

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

但在执行此操作时，我希望此新条目显示在我的“重定向”页面上。然而，它不是“刷新”页面，而是简单地重定向，页面显示与上次导航时相同

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

这是我的提交代码：

  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');
  }

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

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

编辑：呈现表单提交的仪表板组件。我在手机上做这件事，希望一切顺利

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;

类独立组件{
建造师（道具）{
超级（道具）
此.state={
债务：[]
}
}
componentDidMount（）{
axios.get（“/api/fetchDebtCards”）
。然后（（响应）=>{
this.setState（{debtes:response.data}）
})
.catch（e=>{
控制台日志（e）
})
}
render（）{
const fetchdeborts=this.state.deborts.map（debt=>{
返回(
)
})
返回(
{this.state.deborts.length==0？
目前还没有债务关联。为什么不现在尝试添加一个呢？
：{fetchDebts}
)
}
}
出口拖欠个人债务；

另一个编辑：添加了带有React Router for Dashboard组件的我的路线

<Route path="/dashboard" component={Dashboard} />

---

如果您已经如您所说将数据加载到mount上，我会看到两个可能的问题：

第一个问题是，在重定向之前，您没有等待异步请求返回。为此，只需添加一个

等待
：

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
时，每个路径上的路由都会重新render
Dashboard
，我将更改为
'/Dashboard'
，这意味着您的
componentDidMount
每次都会运行。
我觉得问题在于您没有等待axios调用（异步）在导航到仪表板之前完成。也许可以尝试使用async/await，例如：


onSubmit=async（e）=>{
e、 预防默认值（）；
等待axios.post（“/api/submitDebt”{
信用卡：this.state.creditCard已切换，
个人贷款：this.state.personalLoanToggle，
提供者：this.state.provider，
平衡：这个，状态，平衡，
限制：this.state.limit，
月刊：this.state.monthly，
兴趣：这个，州，兴趣，
借来的：这个州借来的
})
this.props.history.push（'/dashboard'）；
}

或者，您可以使用then/catch块，如下所示：


onSubmit=（e）=>{
e、 预防默认值（）；
等待axios.post（“/api/submitDebt”{
信用卡：this.state.creditCard已切换，
个人贷款：this.state.personalLoanToggle，
提供者：this.state.provider，
平衡：这个，状态，平衡，
限制：this.state.limit，
月刊：this.state.monthly，
兴趣：这个，州，兴趣，
借来的：这个州借来的
})
.然后（（）=>this.props.history.push（'/dashboard'））
.catch（（）=>console.log（“发布数据时出错”）；
}
如果您使用的是类组件，则可以在安装“/dashboard”组件时尝试获取数据


componentDidMount（）{
fetchData（）
}
Yep，数据可以很好地获取-它链接到componentDidMount上。这不是问题所在，而是我必须在提交表单后刷新页面以激活它。提交表单时，它只返回原始仪表板页面，而不返回新条目。我想重构代码，使其自动刷新，而不是手动完成。希望这是有意义的。你能发布你如何定义路线的代码吗？嘿-你是说我的React路由器还是我的仪表板组件？：-）您在其中定义了
'/dashboard'
以呈现
的代码感谢您的编辑-这很有效。它也适用于SubmitDebt上的async/await，但这是一个很好的答案。再次感谢！您可以共享
仪表板组件
实现吗？我现在已经添加了它！谢谢你，它在现场工作。祝您今天过得愉快！