Question

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

我在Internet上找到的fetch api示例直接在useEffect函数中创建。如果我的网址更改了，我必须修补所有提取内容。

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

这是我的代码。


    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

Answer 1

如果您立即调用它，则可能希望将其用作匿名函数：

useEffect(() => {

  (async () => {
     const data = await getData(1);
     setData(data);
  })();

}, []);

Answer 2

最好按照警告的提示进行操作-在效果内调用异步函数。

function blabla() {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get(`http://url/api/data/1`)
         .then(promise => {
            setData(promise.data);
         })
         .catch(e => {
            console.error(e);
         })
    }, []);

    return (
        <div>
            this is the {data["name"]}
        </div>
    );
}

Answer 3

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

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

  fetchData();
}, []);

Answer 4

由于getData返回了一个承诺，您可以只使用.then

useEffect(() => {
    getData(1).then(setData);
}, []);

Answer 5

您仍然可以在钩子外部定义异步函数，并在钩子内部调用它。

const fetchData = async () => {
   const data = await getData(1);
   setData(data);
}

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

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

5 个答案: