在其他react页面上显示API数据

基础概念

React 是一个用于构建用户界面的 JavaScript 库。它允许开发者通过组件化的方式来构建复杂的 UI。API（应用程序编程接口）是一种让应用程序之间进行交互的方式，通常用于获取或发送数据。

类型

在 React 中显示 API 数据通常涉及以下几种类型：

类组件：使用 class 关键字定义的组件。
函数组件：使用函数定义的组件，通常与 Hooks 结合使用。
Hooks：React 16.8 版本引入的新特性，允许在函数组件中使用状态和其他 React 特性。

应用场景

在 React 页面上显示 API 数据的应用场景非常广泛，例如：

显示用户信息
展示商品列表
显示实时数据（如天气、股票信息）

示例代码

以下是一个使用函数组件和 useEffect Hook 从 API 获取数据并在页面上显示的示例：

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

function DataDisplay() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

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

export default DataDisplay;