react怎么写ajax-示例代码

React中使用ajax可以通过使用第三方库如axios或者fetch来发送请求。我们需要在React组件中引入相应的库。例如，我们可以使用axios来发送ajax请求。

import React, { Component } from 'react';
import axios from 'axios';
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      error: null
    };
  }
  componentDidMount() {
    axios.get('https://api.example.com/data')
      .then(response => {
        this.setState({ data: response.data });
      })
      .catch(error => {
        this.setState({ error: error.message });
      });
  }
  render() {
    const { data, error } = this.state;
    if (error) {
      return <div>Error: {error}</div>;
    }
    if (!data) {
      return <div>Loading...</div>;
    }
    return (
      <div>
        {/* Render the data */}
      </div>
    );
  }
}
export default MyComponent;

在上面的示例代码中，我们首先引入了React和axios库。然后，在组件的构造函数中，我们初始化了一个state对象，其中包含了data和error两个属性。data属性用于存储从服务器获取的数据，error属性用于存储错误信息。

接下来，在组件的componentDidMount生命周期方法中，我们使用axios库发送了一个GET请求到https://api.example.com/data。当请求成功时，我们通过调用setState方法来更新state中的data属性，将服务器返回的数据保存起来。当请求失败时，我们通过调用setState方法来更新state中的error属性，将错误信息保存起来。

在组件的render方法中，我们根据state中的data和error属性来渲染不同的内容。如果有错误发生，我们渲染一个显示错误信息的div元素。如果数据还在加载中，我们渲染一个显示"Loading..."的div元素。只有当数据加载完成时，我们才会渲染实际的数据。