我如何解構反應查詢異步返回變量，以便其中之一不會記錄未定義？

Question

Axios object 沒有winnersData屬性，因此解構它在原始 ocde 塊中返回undefined 。 我需要從兩個 Axios 請求中解構數據，我稍后對它們的稱呼需要不同。 我只是不確定如何實施這個並且已經苦苦掙扎了一段時間。 我下面的嘗試也失敗了。

我該如何實施？

原始代碼塊：

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} =  axios.get('http://localhost/api/choose-winners', {headers});
        return winnersData
    }

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

    return(....);

嘗試修復fetchWinners()我試過但失敗了：

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

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



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

Answer 1

看起來 useQuery 總是返回一個名為數據的屬性，因此您只需要重命名它（與 axios 返回相同）。 並且不要忘記等待 axios 電話。

const { data } = await axios.get('http://localhost/api/choose-winners', {headers});
return data;
...
const { data } = useQuery('uploads', fetchUploads);
const { data: winnersData } = useQuery('winners', fetchWinners);
console.log('winnersData', winnersData);