如何解决当我的响应需要在下一次依赖 API 调用之前执行一些逻辑操作时,我如何使用 useSWR 钩子
我在 CRA 应用程序中使用 swr
,需要使用 useSWR
挂钩来获取依赖和有条件的数据。我需要做的是:
- 调用 api 以获取一个
id
,我将使用它进行第二次 api 调用。id
位于upcomingEvents
或passedEvents
中。 - 我想从
upcomingEvents
获取它,但如果该数组为空,我想从passedEvents
获取它。 - 我知道我想要两个数组中的第一个 id,因此使用任一数组的第一个索引都可以(例如:
upcomingEvents[0].id
)。 - 以下是第一个 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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。