2

我正在为我的 React REST 客户端使用 ketting。该库提供了访问一些数据的钩子，在我的例子中，这是这个钩子：

import { useResource } from 'react-ketting';
...
const { loading, error, data } = useResource('https://api.example/article/5');

我有多个资源，我想循环使用它们：

items.map(item => {
const { loading, error, data, resourceState } = useResource(item);

 myItems.push({
  title: data.name,
  onClick: () => go(resourceState.links.get('self').href),
 });
});

但是 React 不接受像这样循环useResource钩子。

所以我找到了一个我并不引以为豪的肮脏解决方案......

import React from 'react';
import { useCollection, useResource } from 'react-ketting';

let myItems = [];

const Collection = ({ resource, go }) => {
  const { items } = useCollection(resource);

  myItems = [];

  return (
    <div>
      {items.map(item => (
        <CollectionItem go={go} resource={item} />
      ))}
      <ElementsUser elements={myItems} />
    </div>
  );
};

const CollectionItem = ({ resource, go }) => {
  const { data, resourceState } = useResource(resource);

  myItems.push({
    title: data.name,
    onClick: () => go(resourceState.links.get('self').href),
  });
  return null;
};

你有什么技巧可以解决这个问题吗？

是否有可能导致：

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

4

1 回答 1

1

每个资源使用 1 个组件正是推荐的模式。我什至会说这是一个最佳实践。请注意，useResource如果存在缓存的资源状态，则调用不会导致 API 调用。

如果您发现每次迭代看到 1 个请求，您可能需要确保您的集合将每个成员作为嵌入资源返回。如果您使用该useCollection钩子，则请求将包含一个Prefer: transclude=item标头，以向服务器提示可能需要嵌入。

此外，react-ketting将在卸载时进行清理。

于 2021-03-21T07:32:48.643 回答