小编owe*_*upt的帖子

我最近构建了一个 React 组件（称为 ItemIndexItem），它在我的应用程序上显示图像。例如，我有一个 Search 组件，它将显示过滤项目的索引。显示的每个 Item 都是一个 ItemIndexItem 组件。单击 ItemIndexItem 会将您转到使用相同 ItemIndexItem 的 ItemShow 页面。

搜索.jsx

render() {
  return (
    <ul>
      <li key={item.id}>
        <div>
          <Link to={`/items/${item.id}`}>
            <ItemIndexItem src={item.photos[0].photoUrl} />
            <p>${item.price}</p>
          </Link>
        </div>
      </li>
      ...more li's
    </ul>
  )
}

ItemIndexItem.jsx

render() {
  return (
    <ul>
      <li key={item.id}>
        <div>
          <Link to={`/items/${item.id}`}>
            <ItemIndexItem src={item.photos[0].photoUrl} />
            <p>${item.price}</p>
          </Link>
        </div>
      </li>
      ...more li's
    </ul>
  )
}

该组件完全按预期工作，除了在控制台中引发内存泄漏错误：

无法对卸载的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 清理函数中的所有订阅和异步任务。

在 ItemIndexItem（由 ItemShow 创建）

在 div（由 ItemShow 创建）

作为参考，这是 ItemShow 中我渲染 ItemIndexItem …