我如何分解由AXIOS返回的承诺？

z9zf31ra 于 2022-10-21 发布在 iOS

关注(0)|答案(2)|浏览(156)

下面是获取一些数据的代码

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等待，如下所示，它返回一个适当的数组。

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警告：除用于清理的函数外，Effect函数不得返回任何内容。
看起来您编写了useEffect(async()=>...)或者还给我一个承诺。相反，请在效果中编写异步函数并立即调用它：
UseEffect(()=>{Async Function fetchData(){//如果效果不需要道具或状态，则可以在此处等待Const Response=等待MyAPI.getData(OmeID)；//...}fetchData()；}，[omeID])；//或[]
所以，我亲爱的程序员，告诉我该怎么做？

axios

来源：https://stackoverflow.com/questions/64405989/how-do-i-destructure-a-promise-returned-by-axios

2条答案

按热度按时间

y0u0uwnf1#

我用邮政编码做了一个样例演示：

CODESANDBOX：https://codesandbox.io/s/flamboyant-nobel-p87mt9?file=/src/App.js:257-265

在代码const data = redditFetch(id);中，async函数将返回Promise。您必须使用await，但Reaction将警告您不要转换async函数中的useEffect回调
您可以移除useEffect的接口函数。
不要将setDate放入您的useEffect依赖数组中。在这种情况下，您可以将其保留为空，以便只运行一次。此外，不要放置date，因为它会在无限循环中重新渲染。如果需要一些条件，只需删除依赖项数组并添加一些条件来运行setDate即可。

我必须模拟查询参数中的id才能使用API

代码：

import axios from "axios";
import { useEffect, useState } from "react";
import "./styles.css";

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

export default function App() {
  const [data, setData] = useState([]);

  const Data = data.map((redditContent) => {
    return (
      <div key={redditContent.name}>
        <h2>{redditContent.title}</h2>
        <hr />
      </div>
    );
  });

  useEffect(() => {
    (async function () {
      const redditResponse = await redditFetch();
      console.log(redditResponse);
      setData(redditResponse);
    })();
  }, []);

  return <div className="App">{Data}</div>;
}

替代：更干净的方法(没有匿名函数)

如果您不喜欢匿名函数方法，可以使用以下方法：

async function updateRedditPosts() {
    const redditResponse = await redditFetch();
    console.log(redditResponse);
    setData(redditResponse);
  }

  useEffect(() => {
    updateRedditPosts();
  }, []);

赞(0）回复(0）举报 2022-10-21

kknvjkwl2#

从useEffect返回的任何内容都应该在组件卸载时清除。最好是在那里调用setData函数，而不是返回。
另一方面，你可以使用立即调用函数(IIF)，那么你就不需要解析从redditFetch函数返回的承诺。

赞(0）回复(0）举报 2022-10-21