如何使用react本机类组件在react本机中实现crud axios？(API)

npm install react axios

yarn add react axios

import React from 'react';
import axios from 'axios';

class CrudComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: false,
      error: null,
    };
  }

  // 在这里实现CRUD操作的各个方法
}

class CrudComponent extends React.Component {
  // ...

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    this.setState({ loading: true });
    axios.get('API_URL')
      .then(response => {
        this.setState({ data: response.data, loading: false });
      })
      .catch(error => {
        this.setState({ error: error.message, loading: false });
      });
  }

  createData(data) {
    this.setState({ loading: true });
    axios.post('API_URL', data)
      .then(response => {
        this.fetchData();
      })
      .catch(error => {
        this.setState({ error: error.message, loading: false });
      });
  }

  updateData(id, data) {
    this.setState({ loading: true });
    axios.put(`API_URL/${id}`, data)
      .then(response => {
        this.fetchData();
      })
      .catch(error => {
        this.setState({ error: error.message, loading: false });
      });
  }

  deleteData(id) {
    this.setState({ loading: true });
    axios.delete(`API_URL/${id}`)
      .then(response => {
        this.fetchData();
      })
      .catch(error => {
        this.setState({ error: error.message, loading: false });
      });
  }

  render() {
    // 渲染组件的UI
  }
}

class CrudComponent extends React.Component {
  // ...

  render() {
    const { data, loading, error } = this.state;

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

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

    return (
      <div>
        <button onClick={() => this.createData({ name: 'New Data' })}>Create</button>
        <ul>
          {data.map(item => (
            <li key={item.id}>
              {item.name}
              <button onClick={() => this.updateData(item.id, { name: 'Updated Data' })}>Update</button>
              <button onClick={() => this.deleteData(item.id)}>Delete</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<CrudComponent />, document.getElementById('root'));