ReactJS DataCloneError:未能对“历史记录”执行“pushState”：无法克隆MouseEvent对象

Question

我试图做我的第一个ReactApp，我得到了DataCloneError错误。

我有以下代码:

postsToShow.map((post, id)=>
   <ul key={id}>
        {post.title}
        <button onClick={(post)=>showPost(post)}>Show post</button>
    </ul>
    )

我想在单击按钮时触发方法showPost。

这是 showPost 方法：

  const showPost=(post)=>
{
    history.push({
        pathname: '/showCurrentPost',
        state: {post: post}
    })}

我得到了这个错误DataCloneError:对“History”执行“pushState”失败:MouseEvent对象不能被克隆，我不知道如何修复它。

如果您能帮助我，我将不胜感激。

Answer 1

你所要做的就是移除/重命名匿名函数posts中的参数

ToShow.map((post, id)=>
   <ul key={id}>
        {post.title}
        <button onClick={(e)=>showPost(post)}>Show post</button>
    </ul>
    )

您正在将呈现函数范围中的post从原始post重命名为synteticEventHandler。

Answer 2

在这种情况下，您甚至不打算存储事件，因此可以像这样修复代码：

<button onClick={(ev)=>showPost(post)}>Show post</button>

这样，您就不会从封闭范围中隐藏post变量，也不会将其替换为事件对象。