react项目实现调接口拿到数据到页面使用

在 React 项目中，我们可以通过 fetch 或者 axios 库来发起网络请求，并将返回的数据渲染到页面上。

以下是一个使用 fetch 的示例：

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

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

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => setData(data))
      .catch(error => console.error(error));
  }, []);

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

在上面的示例中，我们使用了 React 的 hooks，其中 useState 用于初始化 state，useEffect 用于在组件挂载后发起网络请求。

接口返回的数据是一个数组，我们通过 map 方法遍历数据，并将每个数据项渲染为一个 li 元素。

如果使用 axios 库发送请求，我们可以按照下面的方式编写代码：

import React, { useState, useEffect } from '