当我的响应需要在下一次依赖 API 调用之前执行一些逻辑操作时，我如何使用 useSWR 钩子

问题描述

我在 CRA 应用程序中使用 swr，需要使用 useSWR 挂钩来获取依赖和有条件的数据。我需要做的是：

1. 调用 api 以获取一个 id，我将使用它进行第二次 api 调用。 id 位于 upcomingEvents 或 passedEvents 中。
2. 我想从 upcomingEvents 获取它，但如果该数组为空，我想从 passedEvents 获取它。
3. 我知道我想要两个数组中的第一个 id，因此使用任一数组的第一个索引都可以（例如：upcomingEvents[0].id）。
4. 以下是第一个 api 调用的代码和响应示例：

const { data: result } = useSWR(`${BASE_URL}/event/${searchEvent}`);
// this second call will wait and run when the first call resolves
const { data: event,error } = useSWR(() => `${BASE_URL}/project/${result.upcomingEvents[0].id}`);

我想获取下一次呼叫的 ID 的第一次呼叫的响应可能如下所示：

{
  "upcomingEvents": [{"id": "1234"},{"id": "5678"},{"id": "0909"}],"passedEvents": [{"id": "0987"},{"id": "6543"}]
}

如果我硬编码第二个 api 调用以使用 upcomingEvents[0].id（如上面的代码示例），我会得到我想要的响应。

我所纠结的是将决定在依赖的第二个 api 调用中使用哪个 ID 的逻辑放在哪里？我想要这个逻辑，但在不违反钩子规则的情况下不知道在哪里

  const { data: result } = useSWR(`${BASE_URL}/event/${searchEvent}`);
  const { data: event,error } = useSWR(() =>
   result.upcomingEvents.length > 0
     ? `${BASE_URL}/project/${result.upcomingEvents[0].id}`
     : `${BASE_URL}/project/${result.passedEvents[0].id}`
  );

解决方法

我会这样做：

• 将两个 useSWR 请求分成不同的函数
• 当第一个 null 的返回值为假时，将 useSWR() 键传递给第二个 useSWR。这将确保在第一个尚未完成的情况下跳过第二个提取。

 const fetcher = url => fetch(url).then(r => r.json())
 
 const useEvents = () => {
  const { data } = useSWR(`${BASE_URL}/event/${searchEvent}`,fetcher);
  return data;
 };
 
 const useEventDetails = () => {
   const events = useEvents();
   let endpoint;

   if (!events) {
     endpoint = null
   }
   else {
    endpoint = events.upcomingEvents.length > 0 ?
     `${BASE_URL}/project/${result.upcomingEvents[0].id}`
     `${BASE_URL}/project/${result.passedEvents[0].id}`;
   }
   
   const { data } = useSWR(`${BASE_URL}/event/${searchEvent}`,fetcher);
   return data;
 }