如何在React中利用useEffect和useState Hooks异步加载数据

在React中，可以使用useEffect和useState Hooks来异步加载数据。下面是一个简单的例子，演示了如何在组件中使用这两个Hooks来异步加载数据：

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

function App() {
  const [data, setData] = useState(null);

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

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

export default App;

在这个例子中，我们首先使用useState来创建一个状态变量data，用于存储从API获取的数据。然后，我们使用useEffect Hook来执行异步操作。在useEffect中，我们定义了一个名为fetchData的异步函数，它会发送一个HTTP请求获取数据，并将返回的数据存储在data状态变量中。最后，我们在组件的返回值中根据data的值来展示数据或加载状态。