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

在React项目中，你可以使用useEffect钩子在组件挂载后调用API接口，并使用useState钩子来管理状态。以下是一个简单的例子：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
function MyComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const response = await axios.get('你的API地址');
        setData(response.data);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };
    fetchData();
  }, []); // 空数组[]意味着这个effect只会在组件挂载时运行一次
 
  if (isLoading) {
    return <div>Loading...</div>;
  }
 
  if (error) {
    return <div>Error: {error}</div>;
  }
 
  return (
    <div>
      {/* 渲染你的数据 */}
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
 
export default MyComponent;

这段代码展示了如何在React函数组件中使用useEffect来调用API接口，并使用useState来管理加载状态、数据和错误信息。当组件挂载后，它会向API发送请求，并在获取数据、发生错误或加载完成后更新组件的状态。根据不同的状态，组件渲染不同的内容。