React.FC 组件中的异步方法：async/await 和 Promise 实现

在 React 函数组件 (React.FC) 中使用异步方法，可以使用 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。