ReactFC组件中怎么使用异步方法

在React函数组件中使用异步方法，可以使用async/await语法或者Promise来处理异步操作。

使用async/await语法：

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  return <div>Component content</div>;
};

export default MyComponent;

使用Promise：

import React, { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const fetchData = () => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error(error));
    };

    fetchData();
  }, []);

  return <div>Component content</div>;
};

export default MyComponent;

无论是使用async/await还是Promise，都需要在组件的生命周期方法（如useEffect）中调用异步方法。在上述示例中，我们使用了useEffect来模拟componentDidMount生命周期方法，并在其中调用了异步方法fetchData