在nextjs中使用axios返回未定义数据

Question

我有一个usessubjects自定义钩子从使用useSWR的API端点获取数据。

import axios from '@/lib/axios'
import useSWR from 'swr'
/**
* Fetcher Function for SWR
*/
const fetchSubjects = async url => {
console.log("url = " + url)
await axios
.get(url)
.then(res => res.data)
.catch(error => {
if (error.response.status !== 409) throw error
})
}
export const useSubjects = (id = -1) => {
// /**
//  * swr hook for fetching subjects
//  */
const { data: subjects, error, mutate } = useSWR(
id > 0 ? `api/get-subject-branch/${id}` : 'api/get-subject-branches',
fetchSubjects,
)
return {
subjects,
error,
}
}

usessubjects钩子稍后会在我的一个组件中使用。

import { useEffect } from 'react'
import { useSubjects } from '@/hooks/subjects'
const myComponent = () => {
const { subjects, error } = useSubjects()
useEffect(() => {
console.log(subjects)
}, [subjects])
return (
<>
<div>My Content</div>
</>
)
}

但是，应该保存从useSWR钩子获取的数据的constant {subjects}似乎仍然是undefined

我已经测试了我的API端点使用直接axiosGET请求，它成功地从我的API提取数据。

事实上，我已经在我的fetchSubjects获取函数中编写了console.log(res.data)，似乎可以获得数据。但不知何故，它没有设置const {data: subjects, ...}，应该保存从API获取的数据，它仍然是undefined

Answer 1

你没有从fetcher返回任何东西，应该是

const fetchSubjects = async (url: string) => {
console.log("url = " + url)
return await axios
.get(url)
.then(res => res.data)
.catch(error => {
if (error.response.status !== 409) throw error
})
}

检查这个工作示例https://codesandbox.io/s/swr-axios-forked-r4loo6