javascript – 为什么`当使用来自react-router-dom的`Link`时,’历史”上执行’pushState’失败?

前端之家收集整理的这篇文章主要介绍了javascript – 为什么`当使用来自react-router-dom的`Link`时,’历史”上执行’pushState’失败?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我看过类似的帖子,但找不到答案,在我的情况下,我正试图从< App />中传递一个动作:

  1. addExpense = (expense) => {
  2. console.log('Hello From AddExpenseForm');
  3. }

to / create我正在渲染的路线< AddExpenseForm />零件

链接已呈现,但是当我单击它时,我在控制台中收到错误

  1. Uncaught DOMException: Failed to execute 'pushState' on 'History': function (expense) {
  2. console.log('Hello From addExpense');
  3. } could not be cloned

为什么会这样,这里的解决方法是什么?

我的更新代码

在Index.js中的路线:

  1. const Routes = () => {
  2. return (

App.js:

  1. addExpense = (expense = {}) => {
  2. console.log('Hello From AddExpenseForm');
  3. }
  4. goToNextPage = (addExpense) => {
  5. this.props.history.push({
  6. pathname: '/create',state: { addExpense: this.addExpense }
  7. });
  8. }
  9. render() {
  10. return (
最佳答案
首先,为addExpense函数添加一些默认值:

  1. addExpense = (expense = DEFAULT) => {
  2. console.log('Hello From addExpense');
  3. }

然后使用链接

或试试这个(更好的方法):

  1. goToNextPage = (addExpense) => {
  2. this.props.history.push({
  3. pathname: '/create',state: { addExpense: addExpense }
  4. });
  5. }

在next(create)组件中使用传递的值,如下所示:

  1. this.props.location.state.addExpense();

猜你在找的JavaScript相关文章