如何在反应中将钩子函数调用到地图中

Question

我正在为我的 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;
};

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

它是否可能导致 :

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Answer 1

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

如果您发现每次迭代看到 1 个请求，您可能需要确保 collection returns 每个成员都作为嵌入式资源。如果您使用 useCollection 挂钩，请求将包含 Prefer: transclude=item header 以提示服务器可能需要嵌入。

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

如何在反应中将钩子函数调用到地图中

How to call a hook function into a map in react

jsx

reactjs

ketting