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

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

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

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

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

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

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

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

我的更新代码

在Index.js中的路线:

const Routes = () => {
  return (
      

App.js:

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

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

  render() {
    return (
      
最佳答案
首先,为addExpense函数添加一些默认值:

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

然后使用链接

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

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

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

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

猜你在找的JavaScript相关文章