如何解構 axios 返回的承諾？

Question

下面是獲取一些數據的代碼

    useEffect(async (id) => {
//    const data = await redditFetch(id);
async function redditFetch(id){
    try {
        const {data:{data}} = await axios.get(`https://www.reddit.com/search.json?q=${id}&limit=50`);
        const {children} = data;
        return children.map(data=> data.data);
    } catch (error) {
        console.log(error);
    }
}
const data = redditFetch(id);
setData(data)
},[setData])

console.log(Data);

這是返回的承諾：

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(50)

我想要的是 PromiseResult 里面的數組。

我還嘗試了另一個使用 async await 這樣的方法，它返回一個正確的數組。

const PostPage = () => {
    const {id} = useParams();
    const [Data, setData] = useState([])
    
    useEffect(async (id) => {
    //    const data = await redditFetch(id);
    async function redditFetch(id){
        try {
            const {data:{data}} = await axios.get(`https://www.reddit.com/search.json?q=${id}&limit=50`);
            const {children} = data;
            return children.map(data=> data.data);
        } catch (error) {
            console.log(error);
        }
    }
    const data = await redditFetch(id);
    setData(data)
    },[setData])

    console.log(Data);

但隨之而來的是一個我無法擺脫的血腥警告：

index.js:1 警告：除了用於清理的函數之外，效果函數不得返回任何內容。

看起來你寫了 useEffect(async () => ...) 或者返回了一個 Promise。 相反，在您的效果中編寫異步函數並立即調用它：

useEffect(() => { async function fetchData() { // 你可以在這里等待 const response = await MyAPI.getData(someId); // ... } fetchData(); }, [someId]); // 或者 [] 如果效果不需要道具或狀態

所以，我親愛的程序員，告訴我該怎么做？？？

Answer 1

任何從 useEffect 返回的東西都應該在組件卸載時被清除。 更好的是您可以在那里調用 setData 函數而不是返回。

另一方面，您可以使用立即調用函數（IIF），那么您不需要解析從 redditFetch 函數返回的承諾。