React点击Upvote按钮出现TypeError: cyclic object value错误求助

问题场景 #

实现无刷新更新点赞数功能时，点击upvote按钮触发TypeError: cyclic object value错误。相关代码如下：

Blog组件代码 #

const Button = ({ onClick, text }) => (
  <button onClick={onClick}>{text}</button>
);

const Blog = ({ blog, updateUpvote }) => {
  const [detailsVisible, setDetailsVisible] = useState(false);

  const toggleDetails = () => {
    setDetailsVisible(!detailsVisible);
  };

  const blogStyle = {
    paddingTop: 10,
    paddingLeft: 2,
    border: 'solid',
    borderWidth: 1,
    marginBottom: 5
  };

  return (
    <div style={blogStyle}>
      <p>
        {blog.title} {blog.author}
        <Button 
          onClick={toggleDetails} 
          text={detailsVisible ? 'Hide Details' : 'Show Details'}
        />
      </p>
      {detailsVisible && (
        <div>
          <p>{blog.url}</p>
          <div>
            upvotes: {blog.upvotes} 
            <Button 
              text="upvote"
              onClick={updateUpvote} />
          </div>
        </div>
      )}
    </div>
  );
};

App组件中updateUpvote方法及Blog调用代码 #

const updateUpvote = async (blog) => {
  try {
    const updatedBlog = await blogService.update(blog.id, {
      ...blog,
      upvotes: blog.upvotes + 1
    });
    setBlogs((prevBlogs) =>
      prevBlogs.map((b) => (b.id === updatedBlog.id ? updatedBlog : b))
    );
    console.log(updatedBlog);
  } catch (error) {
    console.log(error);
  }
};

const blogList = () => (
  blogs.map(blog => (
    <Blog key={blog.id} blog={blog} updateUpvote={updateUpvote}/>
  ))
);

错误原因 #

• React的onClick回调默认会将**鼠标事件对象（MouseEvent）**作为第一个参数传入，而非预期的blog对象。
• 事件对象内部存在循环引用（比如event.target指向按钮元素，元素又通过关联属性引用回事件对象），当updateUpvote中尝试用...blog展开这个事件对象时，就会触发循环对象值的错误。

修复方案 #

在Blog组件中，给updateUpvote包裹一层箭头函数，明确传入当前的blog对象，避免React自动传入事件对象：

修改Blog组件中的upvote按钮代码：

<Button 
  text="upvote"
  onClick={() => updateUpvote(blog)} 
/>

或者使用bind绑定参数：

<Button 
  text="upvote"
  onClick={updateUpvote.bind(null, blog)} 
/>

验证修复 #

修改后，点击upvote按钮时，updateUpvote会正确接收blog对象，展开...blog时不会出现循环引用，接口调用成功后父组件的blogs状态更新，Blog组件自动重新渲染，点赞数无需刷新页面即可更新。

内容的提问来源于stack exchange，提问作者truncet