在地图属性上使用地图内的函数

Question

我有一个 Spring Boot 后端端点，它接受一个客户 ID 并返回客户下了多少订单。这是使用 Spring boot PathVariable 完成的，因此端点如下所示：

"api/v1/totalorders/{id}"

端点接受 url 中的 id 并将总订单作为正文中的数字返回，如图所示，它为 id 为 2 的客户返回 1 个总订单。

我想在显示其他客户信息的表格中显示这个，这就是表格现在的样子：

我希望 totalOrders 通过在同一行中获取客户 ID 并返回订单数量来显示订单数量。

我使用 axios 在我的 APIService 中获取 API 端点，如下所示：

const GET_TOTAL_ORDERS_API_URL ='http://localhost:8080/api/v1/totalorders/';
const authConfig = {
  auth: {
      username: "admin",
      password: "admin"
  }
}
     getTotalOrders(customerId) {
      return axios.get(GET_TOTAL_ORDERS_API_URL+customerId, authConfig)
  }

然后在我的 listCustomers 类组件中，构造函数是这样的：

  constructor(props){
    super(props)
    this.state = { customers: [],totalOrders: []}
    this.onSort = this.onSort.bind(this)
}

我的 getTotalOrders 看起来像这样：

   getTotalOrders(id) {

  APIService.getTotalOrders(id).then((response) => {
    this.setState({totalOrders: response.data})
})
}

编辑：我的渲染方法：

 render(){
    return (
          <div className="listCustomersContainer"> 
          <NavLink to="/adminhomepage"><button id="backButton">Go back</button></NavLink>
        <br/>

        <div className="customerTableContainer">
            <table className="table table-bordered" id="customerTable">
                <thead>
                    <tr className="customerTableRow">

                        
                        <th onClick={e => this.onSort(e, 'customerId')}>Customer ID </th>
                        <th onClick={e => this.onSort(e, 'customerFirstName')}>Customer First-Name</th>
                        <th onClick={e => this.onSort(e, 'customerLastName')}>Customer Last-Name</th>
                        <th onClick={e => this.onSort(e, 'customerAdress')}>Customer Adress</th>
                        <th onClick={e => this.onSort(e, 'customerEmail')}>Customer E-mail</th>
                        <th onClick={e => this.onSort(e, 'totalOrders')}>Total Orders</th>

                    </tr>
                </thead>

                <tbody>
                    {
                this.state.customers.map(
                        customer => {
                        {this.getTotalOrders(customer.customerId)}
                        return (
                        <tr className="customerTableRow" key= {customer.customerId} >
                            <td id="customerIdMap">{customer.customerId}</td>
                            <td>{customer.customerFirstName}</td>
                            <td>{customer.customerLastName}</td>
                            <td>{customer.customerAdress}</td>
                            <td>{customer.customerEmail}</td>
                            <td>{this.state.totalOrders}</td>
                        </tr>);
                    })
                            
                    }
                </tbody>
            </table>
            
            </div>
        </div>
        
    )
}

totalOrders 现在正在显示，但正在循环显示并为两个客户显示相同的数量：

后端的堆栈跟踪显示它一直在循环

    2021-12-27 11:15:26.412  INFO 13050 --- [io-8081-exec-10] LOGGER                                   : LISTED TOTAL ORDERS FOR A CUSTOMER
Hibernate: select count(*) from TBL_ORDER WHERE CUSTOMER_ID=?
2021-12-27 11:15:26.680  INFO 13050 --- [nio-8081-exec-8] LOGGER                                   : LISTED TOTAL ORDERS FOR A CUSTOMER
Hibernate: select count(*) from TBL_ORDER WHERE CUSTOMER_ID=?
2021-12-27 11:15:26.702  INFO 13050 --- [nio-8081-exec-1] LOGGER                                   : LISTED TOTAL ORDERS FOR A CUSTOMER
Hibernate: select count(*) from TBL_ORDER WHERE CUSTOMER_ID=?
2021-12-27 11:15:27.118  INFO 13050 --- [nio-8081-exec-3] LOGGER                                   : LISTED TOTAL ORDERS FOR A CUSTOMER
Hibernate: select count(*) from TBL_ORDER WHERE CUSTOMER_ID=?
2021-12-27 11:15:27.153  INFO 13050 --- [nio-8081-exec-2] LOGGER                                   : LISTED TOTAL ORDERS FOR A CUSTOMER
Hibernate: select count(*) from TBL_ORDER WHERE CUSTOMER_ID=?
2021-12-27 11:15:27.490  INFO 13050 --- [nio-8081-exec-4] LOGGER                                   : LISTED TOTAL ORDERS FOR A CUSTOMER
Hibernate: select count(*) from TBL_ORDER WHERE CUSTOMER_ID=?
2021-12-27 11:15:27.673  INFO 13050 --- [nio-8081-exec-6] LOGGER                                   : LISTED TOTAL ORDERS FOR A CUSTOMER
Hibernate: select count(*) from TBL_ORDER WHERE CUSTOMER_ID=?
2021-12-27 11:15:28.012  INFO 13050 --- [nio-8081-exec-5] LOGGER                                   : LISTED TOTAL ORDERS FOR A CUSTOMER
Hibernate: select count(*) from TBL_ORDER WHERE CUSTOMER_ID=?
2021-12-27 11:15:28.140  INFO 13050 --- [nio-8081-exec-7] LOGGER                                   : LISTED TOTAL ORDERS FOR A CUSTOMER
Hibernate: select count(*) from TBL_ORDER WHERE CUSTOMER_ID=?
2021-12-27 11:15:28.515  INFO 13050 --- [nio-8081-exec-9] LOGGER                                   : LISTED TOTAL ORDERS FOR A CUSTOMER
Hibernate: select count(*) from TBL_ORDER WHERE CUSTOMER_ID=?

Answer 1

您需要使用表格最后一个单元格中的状态变量，如下所示：

...
<td>{this.state.totalOrders}</td>
...

此外，当您从 API 收到响应时，您需要设置此状态变量的值，如下所示：

this.setState({totalOrders: response.data});

this.state.customers.map(
                            customer => {
                            {this.getTotalOrders(customer.customerId)}
                            return (
                            <tr className="customerTableRow" key= {customer.customerId} >
                                <td id="customerIdMap">{customer.customerId}</td>
                                <td>{customer.customerFirstName}</td>
                                <td>{customer.customerLastName}</td>
                                <td>{customer.customerAdress}</td>
                                <td>{customer.customerEmail}</td>
                                <td>{this.state.totalOrders}</td>
                            </tr>);
                        })