React：如何解决POST请求的Dispatch操作失败

Question

在我的react / redux应用程序中，我有一个#!/bin/bash ENV_1=firstparam ENV_2=secondparam 组件，用于向Modal组件添加新条目。填写Table表单并单击创建按钮后，没有任何反应，而是在我的 Redux DevTools 中出现错误

此字段为必填项。

我假设传入的数据未传递到 action 文件中的Modal api请求中。 我的方法不起作用。

模式组件

POST

表组件

const AddInvoiceModal = (props) => {
  const [formData, setFormData] = useState({
    invoiceOwner: "",
    product: "",
    quantity: ""
  });

  const {
    invoiceOwner,
    product,
    quantity
  } = formData;


  const onChange = (e) =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

    return (
      <div className="App container">
        <Modal isOpen={props.newInvoiceModal} scrollable={true}>
          <ModalHeader toggle={props.toggleModal}>Add Invoice</ModalHeader>
          <ModalBody>
            <FormGroup>
              <Label for="title">Name</Label>
              <Input
                id="name"
                name="invoiceOwner"
                value={invoiceOwner}
                onChange={(e) => onChange(e)}
              />
            </FormGroup>
            <FormGroup>
              <Label for="title">Product</Label>
              <Input
                id="product"
                name="product"
                value={product}
                onChange={(e) => onChange(e)}
              />
            </FormGroup>
            <FormGroup>
              <Label for="title">Quantity</Label>
              <Input
                id="quantity"
                name="quantity"
                value={quantity}
                onChange={(e) => onChange(e)}
              />
            </FormGroup>
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={props.addInvoiceData(formData)}>
              Create     <==== CREATE BUTTON
            </Button>{" "}
            <Button color="secondary" onClick={props.toggleModal}>
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    );

}

export default AddInvoiceModal;

import AddInvoiceModal from './AddInvoiceModal'
import {getInvoiceData,toggleModal,addInvoiceData} from "../../actions/customers/invoice";

const InvoiceTable = (props) => {
  const invoiceData = useSelector((state) => state.invoice.invoiceData);
  const newInvoiceModal = useSelector((state) => state.invoice.newInvoiceModal);  
  const dispatch = useDispatch(); 

  useEffect(() => {
    dispatch(getInvoiceData());
  }, [dispatch]);
  

  const classes = useStyles();

  const columns = [
    { name: "date", label: "Date" },
    { name: "invoiceOwner", label: "Name" },
    { name: "invoiceNo", label: "Invoice No" },
    { name: "product", label: "Product" },
    { name: "quantity", label: "Quantity" },
  ];

  return (
    <div className={classes.root}>
      {/* ADD NEW EMPLOYEE MODAL */}
      <AddInvoiceModal
        toggleModal={() => dispatch(toggleModal())}
        addInvoiceData={() => dispatch(addInvoiceData())}
        newInvoiceModal={newInvoiceModal}
        invoiceData={invoiceData}
      />

      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>
            <MUIDataTable
              title={
                <Fragment>
                  Purchase Invoice
                  <Tooltip title="Add">
                    <AddBoxIcon
                      color="action"
                      style={addIcon}
                      onClick={() => dispatch(toggleModal())} <===== MODAL TRIGGER
                    />
                  </Tooltip>
                </Fragment>
              }
              data={invoiceData}
              columns={columns}
              options={options}
            />
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
};

InvoiceTable.propTypes = {
  invoiceData: PropTypes.object.isRequired,
  getInvoiceData: PropTypes.func,
  toggleModal: PropTypes.func,
  addInvoiceData: PropTypes.func,
  newInvoiceModal: PropTypes.bool,
};

export default InvoiceTable;