0

我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}`
  );
4

1 回答 1

0

我会这样做：

  • 将两个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;
 }
于 2021-02-14T04:31:25.553 回答