javascript - 当我的响应需要在下一次相关 API 调用之前执行一些逻辑操作时，我如何使用 useSWR 挂钩

Question

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

1. 调用一个 api 来获取id我将用于第二个 api 调用的一个 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}`
  );

Answer 1

我会这样做：

• 将两个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;
 }