使用异步函数返回Promise的useState：{<pending>}

import React, { useState } from 'react';

const asyncFunction = () => {
  return new Promise((resolve, reject) => {
    // 异步操作，比如发送网络请求
    setTimeout(() => {
      resolve('异步操作完成');
    }, 1000);
  });
};

const MyComponent = () => {
  const [state, setState] = useState({ status: 'pending', data: null });

  const fetchData = async () => {
    setState({ status: 'pending', data: null });

    try {
      const result = await asyncFunction();
      setState({ status: 'fulfilled', data: result });
    } catch (error) {
      setState({ status: 'rejected', data: error });
    }
  };

  return (
    <div>
      <button onClick={fetchData}>点击获取数据</button>
      {state.status === 'pending' && <div>正在加载中...</div>}
      {state.status === 'fulfilled' && <div>数据获取成功：{state.data}</div>}
      {state.status === 'rejected' && <div>数据获取失败：{state.data}</div>}
    </div>
  );
};

export default MyComponent;