0

我正在尝试为我的数据获取实现 swr 库。我曾经使用普通的 axios 和我创建的一些自定义钩子。我遇到的问题是，出于某种原因，swr 在设置默认 axios 标头之前触发了 get 请求，因此在发送标识我的应用程序帐户所需的标头时丢失了。我的猜测是它与 SWR 的预取功能有关，但这只是一个疯狂的猜测，不知道如何防止这种情况发生。

import axios from "axios";
import React, {useLayoutEffect} from "react";
import useSWR from "swr";


function Child({match}) {
    const fetcher = () => {
        console.log('Should happen second')
        axios.get('https://api.mydomain.com').then(res => res.data)
    }

    const {data} = useSWR('/account/specific/data', fetcher)

    return <div>{JSON.stringify(data)}</div>
}

export default function Account({match}) {

    let accountId = match.params.accountId;

    useLayoutEffect(() => {
        console.log('Should happen first')
        axios.defaults.headers.common["Account-Token"] = accountId;
    }, [accountId]);

    return <Child/>
}
4

3 回答 3

1

你的序列是错误的 imo。

1）如果您的组件尚未准备好生成，您可能应该返回 null 。

export default function Account({match}) {

    let accountId = match.params.accountId;

    useLayoutEffect(() => {
        console.log('Should happen first')
        axios.defaults.headers.common["Account-Token"] = accountId;
    }, [accountId]);
    
    if (!accountId) return null  //<-- don't generate the Child component until you are ready.

    return <Child/>
}

2) 如果你真的想在 mount 时禁用 SWR fetch，那就设置 { revalidaOnMount: false }

例如

const {data} = useSWR('/account/specific/data', fetcher, { revalidateOnMount: false})

3）或者您可以使用条件提取，以便仅在您的变量准备好时提取。

const { data } = useSWR( accountID ? /url/path : null, fetcher )

当 key 为 null 时，useSWR 钩子不会调用 fetcher。

于 2020-10-24T12:33:26.737 回答
1

您正在使用没有async和await的 axios ，而且您在方法获取器中没有返回，请通过以下方式更改此方法：

    const fetcher = async () => {
        return await axios.get('https://api.mydomain.com').then(res => res.data)
    }
于 2021-06-09T17:31:48.433 回答
-1

我能够解决将 initialData 添加到 useSWR 挂钩上的选项的问题。

    const { data, error } = useSWR('/api/data', fetcher, initialData: [], revalidateOnMount: true)
于 2020-10-24T11:43:23.480 回答