如何在React中的UseEffect（）中调用异步函数？

  • Z时代
  • 2024-01-10
  • 分类：问答

我想调用一个异步函数，并为我的UseEffect获取结果。

我在互联网上找到的提取API示例直接在useEffect函数中创建。如果我的URL更改，我必须修补所有提取内容。

当我尝试时，我收到一条错误消息。

这是我的代码。

    async function getData(userId) {
        const data = await axios.get(`http://url/api/data/${userId}`)
            .then(promise => {
                return promise.data;
            })
            .catch(e => {
                console.error(e);
            })
            return data;
    }
    function blabla() {
        const [data, setData] = useState(null);
        useEffect(async () => {
            setData(getData(1))
        }, []);
        return (
            <div>
                this is the {data["name"]}
            </div>
        );
    }

index.js：1375警告：除了用于清理的函数以外，效果函数不得返回任何其他内容。 看起来您编写了useEffect（async（）=>

…）或返回了Promise。而是在您的效果中编写异步函数并立即调用它：

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

回答：

在效果内部创建一个异步函数，等待getData(1)结果，然后调用setData()：

useEffect(() => {
  const fetchData = async () => {
     const data = await getData(1);
     setData(data);
  }
  fetchData();
}, []);

以上是 如何在React中的UseEffect（）中调用异步函数？ 的全部内容， 来源链接： utcz.com/qa/436429.html

回到顶部