Javascript CRUD操作后反应更新组件

我正在构建一个React web应用程序，它在连接到数据库的表上具有CRUD操作。我在React组件中使用axios对后端控制器进行ajax调用。Customers组件显示my表中的记录列表。当我从数据库中创建、删除或编辑记录时，Customers组件不会自动刷新。我必须刷新页面才能从数据库中获取更新的记录。我曾考虑过提升状态，但我不明白为什么它不起作用，因为客户组件已经是父组件了

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);
      });
  }
}

import React，{Component}来自'React'；
从“axios”导入axios；
从“语义ui反应”导入{Table，Header}；
从“/EditCustomerModel”导入EditCustomerModel；
从“/addCustomerModel”导入addCustomerModel；
从“./DeleteCustomerModel”导入DeleteCustomerModel；
导出类客户扩展组件{
建造师（道具）{
超级（道具）；
this.state={customers:[]}；
}
componentDidMount（）{
此参数为.populateCustomerData（）；
}
render（）{
让客户=this.state.customers；
返回(
客户表
此组件演示客户表中的CRUD操作

身份证件
名称
地址
行动
{customers.map（（customer）=>{
返回(
{customer.id}
{customer.name}
{客户地址}
)
})}
);
}
populateCustomerData=（）=>{
axios.get（“客户/GetCustomers”）
。然后（（结果）=>{
this.setState（{customers:result.data}）
})
.catch（（错误）=>{
console.log（错误）；
});
}
}

您需要将changeState函数从Customers组件传递到modals，并在crud操作完成后调用它

或

---

您可以将populateCustomerData函数传递给modals，并让它们在crud操作完成后调用该函数。

您使用哪种状态管理技术来更新状态？编辑：您不能期望从数据库中删除某些内容，并在页面上显示结果。如果从应用程序中删除某些内容并更新状态，则将显示结果，否则仅在刷新和访问数据库中的数据时才会显示结果。您应该从数据库中重新提取编辑的元素并从列表中更新它，或者如果您懒惰，则重新提取所有列表。这两种方法都需要从父组件传递到子组件的道具，并且changeState函数是否应检查customers组件中的customers[]状态？changeState函数应接收更新的客户列表并将其设置为状态。您可以在客户组件中定义它，并将函数作为道具传递给子组件，即CRUD模态。他们在完成操作后使用更新的客户列表调用函数。