下面是我的CustomerBill.js

import React, { Component } from "react";
      import "bootstrap/dist/css/bootstrap.min.css";
      import axios from "axios";
      import $ from "jquery";
      import Box from "@mui/material/Box";
      import Button from "@mui/material/Button";
      import CustomerTable from "./table";

      class CustomerBill extends Component {
        constructor() {
          super();
          this.state = {
            Customer: "",
            customerTable: {
              index: Math.random(),
              id: "",
              paymentDescription: "",
              quantity: "",
              unitPrice: "",
            },
          };
          this.handleSubmit = this.handleSubmit.bind(this);
          this.handleChange = this.handleChange.bind(this);
        }
        handleChange = (e) => {
          if (
            ["id", "paymentDescription", "quantity", "unitPrice"].includes(
              e.target.name
            )
          ) {
            let customerTable = { ...this.state.customerTable };
            customerTable[e.target.dataset.id][e.target.name] = e.target.value;
          } else {
            this.setState({ [e.target.name]: e.target.value });
          }
        };

        addNewRow = () => {
          this.setState((prevState) => ({
            customerTable: [
              ...prevState.taskList,
              {
                index: Math.random(),
                id: "",
                paymentDescription: "",
                quantity: "",
                unitPrice: "",
              },
            ],
          }));
        };

        clickOnDelete(record) {
          this.setState({
            customerTable: this.state.customerTable.filter((r) => r !== record),
          });
        }
        handleSubmit(event) {
          event.preventDefault();
          const bill = {
            Customer: this.state.customerTable,
          };

          axios
            .post(`http://localhost:4000/customer/bill`, bill)
            .then((response) => {
              console.log(response.data);
              return $(".alert-success").show();
            });
          this.setState({
            Customer: "",
          });
        }

        render() {
          let { customerTable } = this.state;
          return (
            <div>
              <div className="container">
                <div className="form-div">
                  <h1>Customer Bill</h1>
                  <Box
                    component="form"
                    onSubmit={this.handleSubmit}
                    noValidate
                    sx={{ mt: 1 }}
                    onChange={this.handleChange}
                  >
                    <div className="row" style={{ marginTop: 20 }}>
                      <div className="col-sm-3"></div>
                      <div className="col-sm-12">
                        <div className="card">
                          <div className="card-header text-center">
                            Bill Description
                          </div>
                          <div className="card-body">
                            <div className="row">
                              <div className="col-sm-4"></div>
                            </div>
                            <table>
                              <thead>
                                <tr>
                                  <th className="text-center"> sN </th>
                                  <th className="text-center"> Id </th>
                                  <th className="text-center">
                                    Payment Description
                                  </th>
                                  <th className="text-center"> Quantity </th>
                                </tr>
                              </thead>
                              <tbody>
                                <CustomerTable
                                  id="customerTable"
                                  add={this.addNewRow.bind(this)}
                                  delete={this.clickOnDelete.bind(this)}
                                  customerTable={customerTable}
                                />
                              </tbody>
                            </table>
                          </div>
                        </div>
                      </div>
                      <div className="col-sm-1"></div>
                    </div>
                    <Button type="submit" fullWidth sx={{ mt: 3, mb: 2 }}>
                      <span className="btn btn-warning btn-block form-control form-group">
                        Submit
                      </span>
                    </Button>
                  </Box>
                </div>
              </div>
            </div>
          );
        }
      }

      export default CustomerBill;

下面是table.js

import React from "react";

    const CustomerTable = (props, val, idx, post) => {
    return props.customerTable.map((val, idx, post) => {
        let id = `id-${idx}`,
        paymentDescription = `paymentDescription-${idx}`,
        quantity = `quantity-${idx}`,
        unitPrice = `unitPrice-${idx}`;
        return (
        <tr key={val.index}>
            <td>
            <input
                type="text"
                name="id"
                data-id={idx}
                id={id}
                className="form-control "
            />
            </td>
            <td>
            <input
                type="text"
                name="paymentDescription"
                id={paymentDescription}
                data-id={idx}
                className="form-control "
            />
            </td>
            <td>
            <input
                type="text"
                name="quantity"
                id={quantity}
                data-id={idx}
                className="form-control"
            />
            </td>
            <td>
            <input
                type="text"
                name="unitPrice"
                id={unitPrice}
                data-id={idx}
                className="form-control"
            />
            </td>
            <td>
            {idx === 0 ? (
                <button
                onClick={() => props.add()}
                type="button"
                className="btn btn-primary"
                >
                Add Row
                </button>
            ) : (
                <button
                className="btn btn-danger"
                onClick={() => props.delete(val)}
                >
                Delete Row
                </button>
            )}
            </td>
        </tr>
        );
    });
    };
    export default CustomerTable;

我试图将customerTable对象发送到Customer数组。但是，我得到了Uncatched TypeErrorprops.customerTable.map不是一个函数。我如何改进此代码，以便能够将数据作为对象推送到customer数组。提前感谢