reactjs - React Router Link 无法克隆功能

Question

我正在练习我的 React，偶然发现了一些我在互联网上找不到答案的东西。
上下文是：我正在使用 Random User API 创建一个页面。在主页上，导航的用户可以浏览随机的人并将他们添加到列表中。此外，用户可以单击一个人的姓名，然后转到一个包含有关该人的更多详细信息的页面。我使用 React Router Dom 和附加到缩略图的链接配置了路由。到目前为止，一切都很好。
问题是，当我决定在这个项目上测试某种构造函数时，所以当我从 API 获取人员的信息对象时，我使用了一个迷你构造函数来添加一些方法。像这样的东西：

function Person(person) {
  return {
    ...person,
    getFullName: () => `${person.name.first} ${person.name.last}`
  }
}

const data = await fetchPerson();
addPerson(Person(data));

所以，在主页上没有问题。我在标签内调用 getFullName() <p>，它完美地显示了名称。但是，当我尝试通过 's state 发送包含信息和方法的构造的 Person 对象时<Link>，我收到一条错误消息，指出无法克隆该函数。注意：我也尝试使用类构造函数。错误如下：

DataCloneError: Failed to execute 'pushState' on 'History': person => `${this.person.name.title} ${this.person.name.first} ${this.person.name.last}` could not be cloned.

我尝试在 Person 函数中声明该函数，然后在 return 和许多其他内容中引用它，但似乎没有任何效果。
如果我能对这个问题有所了解，那就太好了！
谢谢！:))

编辑：
我尝试在“构造函数”之外声明该函数并且它有效。但它不是很干净。如果有任何其他建议/解释浮出水面，我现在真的很想！

const getFullName = (person) => `${person.name.title} ${person.name.first} ${person.name.last}`;

export class Person {
  constructor(person) {
    this.person = person;
    this.getFullName = getFullName(person);
    this.test = 'IOEJASIEPASKEKASÇLEKÇASKEA'
  }
}

EDIT2：也尝试了一个函数，如下所示，并且有效。但我就是无法理解“无法克隆”的错误。

export function Person(person) {
  const getFullName = (person) => `${person.name.title} ${person.name.first} ${person.name.last}`;

  return {
    ...person,
    fullName: getFullName(person) ,
  }
}

标签： reactjsconstructorhyperlinkrouter