如何解构 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 函数返回的承诺。