问CRUD操作后的React更新组件

EN

import React, { Component } from 'react';
import axios from 'axios';
import { Table, Header } from 'semantic-ui-react';
import EditCustomerModal from './EditCustomerModal';
import AddCustomerModal from './AddCustomerModal';
import DeleteCustomerModal from './DeleteCustomerModal';

export class Customers extends Component {
  constructor(props) {
    super(props);
    this.state = { customers: [] };

  }

  componentDidMount() {
    this.populateCustomerData();
  }

  render() {

    let customers = this.state.customers;

    return (
      <div>
        <Header as='h2'>Customer Table</Header>
        <p>This component demonstrates CRUD operations from the customer table.</p>

        <AddCustomerModal />

        <Table striped>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>ID</Table.HeaderCell>
              <Table.HeaderCell>Name</Table.HeaderCell>
              <Table.HeaderCell>Address</Table.HeaderCell>
              <Table.HeaderCell textAlign="center">Actions</Table.HeaderCell>
            </Table.Row>
          </Table.Header>

          <Table.Body>
            {customers.map((customer) => {
              return (
                <Table.Row key={customer.id}>
                  <Table.Cell>{customer.id}</Table.Cell>
                  <Table.Cell>{customer.name}</Table.Cell>
                  <Table.Cell>{customer.address}</Table.Cell>
                  <Table.Cell textAlign="center">

                    <EditCustomerModal details={customer} />
                    <DeleteCustomerModal customerID={customer.id} />

                  </Table.Cell>
                </Table.Row>

              )
            })}
          </Table.Body>
        </Table >
      </div>
    );
  }

  populateCustomerData = () => {
    axios.get("Customers/GetCustomers")
      .then((result) => {
        this.setState({ customers: result.data })
      })
      .catch((error) => {
        console.log(error);
      });
  }
}