在 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 'react';
import axios from 'axios';

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

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

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

axios 库也使用了 React 的 hooks，其中 useEffect 方法用于在组件挂载后发起网络请求。axios.get 方法返回一个 Promise 对象，我们可以在 then 方法中处理响应数据，并使用 setState 方法更新组件的 state。

无论是 fetch 还是 axios，我们都需要在 useEffect 方法中调用它们，这样可以确保数据的获取和渲染发生在组件挂载之后。此外，我们还需要使用 useState 方法初始化组件的 state，setState 方法来更新组件的 state。