为什么我的 useQuery 钩子之一没有返回未定义，而另一个则返回未定义？

Question

我正在使用 React Query，但我不确定为什么我的 useQuery 挂钩之一正在记录 undefined 而另一个则正在记录正确的数据。它们都是异步函数，并且实际上在做同样的事情。我已经尝试调试这个有一段时间了，但无济于事，我已经碰壁了。

我该如何修复它，以便 console.log(winnersData); 也像 console.log(data); 一样记录正确的数据？

注意：是的，在 Postman 上测试时，fetchUploads() 正确返回数据，因此我们可以排除没有返回任何内容的情况。

async function fetchUploads(){
    const headers = {
        "Accept": 'application/json',
        "Authorization": `Bearer ${authToken}`
    };

    const {data} = await axios.get('http://localhost/api/get-user-uploads-data', {headers});
    return data

}

async function fetchWinners(){
    const headers = {
        "Accept": 'application/json',
        "Authorization": `Bearer ${authToken}`
    };

    const {winnersData} = await axios.get('http://localhost/api/choose-winners', {headers});
    return winnersData
}

const { data } = useQuery('uploads', fetchUploads)
const { winnersData } = useQuery('winners', fetchWinners)
console.log(data); // returns correct data
console.log(winnersData); // returns undefined

return(...);

Answer 1

我认为困惑在于你的第一个返回被称为数据。巧合的是，Axios 请求返回一个具有名为 data 的属性的对象，您已成功解构该对象。它们没有名为 WinnersData 的属性，因此 const {winnersData} = wait axios.get('http://localhost/api/choose-winners', {headers}); 未定义。

编辑：

async function fetchUploads(){
    const headers = {
        "Accept": 'application/json',
        "Authorization": `Bearer ${authToken}`
    };

    const {data} = await axios.get('http://localhost/api/get-user-uploads-data', {headers});
    return data

}

async function fetchWinners(){
    const headers = {
        "Accept": 'application/json',
        "Authorization": `Bearer ${authToken}`
    };

    // const {winnersData} = await axios.get('http://localhost/api/choose-winners', {headers});
    // return winnersData
    // Remember, there is no winnersData on the object Axios is returning

    const {data} = await axios.get('http://localhost/api/choose-winners', {headers});
    return data
    // There is a data property for you to destructure (as there is on every successful Axios return), so we'll return that!

}

const data = useQuery('uploads', fetchUploads)
const winnersData = useQuery('winners', fetchWinners)
// I'm not sure what the shape of the data returned by these functions is, so I took out the destructuring. Remember, you can't destructure a property that isn't there.

console.log(data); // returns correct data
console.log(winnersData); // returns undefined

return(...);