React 表单
React Axios 

React AJAX

在 React中 进行 AJAX（异步JavaScript和XML）请求通常使用fetch API。以下是一个基本的示例，展示了如何在React组件中执行AJAX请求：

使用fetch API

import React, { useState, useEffect } from 'react';
const MyComponent = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('网络响应不正常');
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('获取数据时出错:', error);
      }
    };
    fetchData();
  }, []); // 空依赖数组确保effect只运行一次
  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
};
export default MyComponent;


示例说明：

  • useState: 使用data状态来保存获取到的数据。

  • useEffect: 当组件挂载时运行一次（[]空依赖数组），触发数据获取函数。

  • fetch: 执行GET请求到 'https://api.example.com/data'。

  • 处理响应: 检查响应是否ok，然后将响应转换为JSON格式并更新data状态。

  • 渲染: 根据data是否为null条件渲染列表，否则显示"加载中..."消息。

注意事项

  • 错误处理: 总是在AJAX请求中处理错误（使用try/catch块或Promise的.catch()方法）。

  • 状态管理: 更新React组件状态（使用useState）以便在数据更改时重新渲染UI。

  • 依赖关系: 使用依赖数组控制useEffect的运行时机（以避免无限循环）。


这些模式确保您的React组件能够有效地处理AJAX请求，并根据从远程服务器获取的数据更新UI。