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

在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）中调用异步方法，并在获取到结果后更新组件的状态，以触发重新渲染