简单的使用Hooks和打印的数据获取API？

使用Hooks和打印数据获取API的示例代码如下：

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

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

const DataComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const getData = async () => {
      const result = await fetchData();
      setData(result);
    };

    getData();
  }, []);

  useEffect(() => {
    console.log(data);
  }, [data]);

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

export default DataComponent;

在上面的代码中，fetchData 函数用于从API获取数据。DataComponent 组件使用了 useState 和 useEffect Hook。在 useEffect 中使用 fetchData 函数获取数据，并将数据存储在 data 状态中。当 data 发生变化时，另一个 useEffect 会触发，并打印出数据。最后，根据数据的存在与否，显示相应的内容。