React.FC 组件中调用异步方法的最佳实践

在 React.FC 组件中调用异步方法的方式有多种，以下是常见的几种方式：

使用 async/await：在 React.FC 组件中，可以在函数体内使用 async 关键字来定义一个异步函数，并在需要的地方使用 await 关键字来等待异步方法的返回结果。例如：

import React, { useState, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const [data, setData] = useState<any>(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const jsonData = await response.json();
      setData(jsonData);
    };

    fetchData();
  }, []);

  return (
    <div>
      {data ? (
        <ul>
          {data.map((item: any) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default MyComponent;

在上述示例中，使用了 async/await 来等待 fetch 请求的结果，并将返回的 json 数据存储在组件的状态中。

使用 Promise.then()：如果不想使用 async/await 语法，也可以使用 Promise 的 then() 方法来处理异步方法的返回结果。例如：

import React, { useState, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const [data, setData] = useState<any>(null);

  useEffect(() => {
    const fetchData = () => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(jsonData => setData(jsonData));
    };

    fetchData();
  }, []);

  return (
    <div>
      {data ? (
        <ul>
          {data.map((item: any) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default MyComponent;

在上述示例中，使用了 Promise 的 then() 方法来处理 fetch 请求的结果，并将返回的 json 数据存储在组件的状态中。

无论使用哪种方式，都需要在组件的生命周期方法（如 useEffect）中调用异步方法，并在获取到结果后更新组件的状态，以触发重新渲染。