react hooks请求数据并渲染到页面示例

好的，下面是一个使用React Hooks来请求数据并渲染到页面的示例代码：

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

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

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://jsonplaceholder.typicode.com/posts',
      );
      setData(result.data);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Example Component</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default ExampleComponent;

在这个示例中，我们使用了React Hooks中的useState和useEffect。useState用于存储从API获取的数据，而useEffect用于在组件挂载时调用API并更新数据。

在useEffect中，我们定义了一个名为fetchData的异步函数，它使用axios来获取数据。然后，我们调用setData来更新状态中的数据。

最后，在组件的返回值中，我们使用map函数来遍历数据，并将每个条目呈现为一个列表项。

这就是一个简单的React Hooks请求数据并渲染到页面的示例。