如何将数组设置为onclick redux表单状态

Question

我在项目中使用向导。在第2步中，我有一个带有数据表的表格。数据表的目的是当我单击按钮时，表单值会推入数据表。在提交表单，将表单值追加或推入数据表时，我已经完成了此操作，但是我面临的一个问题是我无法维护或设置该a data table array的状态。

我的代码如下所示

import React, {useState, Fragment} from 'react';
import PropTypes from 'prop-types';
import { Field, FieldArray, reduxForm } from 'redux-form'
import FormInput from './../FormInput'
import ConsigneeTables from './ConsigneeTables'
import {
  Button,
  Card,
  CardBody,
  Col,
  FormGroup,
  Input,
  Label,
  Row,
  Table,
  Progress
} from 'reactstrap'

const ConsigneeLocations = (props) => {
  const {handleSubmit, previousPage} = props
  const consigneeData = []

  const initialFormState = {
    id: null,
    consignee_branch_number: '',
    consignee_add1: '',
  }



  const [CurrentConsignee, setCurrentConsignee] = useState(initialFormState)

  const [consignees, setConsignees] = useState(consigneeData)

  const [consignee, setConsignee] = useState(initialFormState)

  const handleInputChange = (event) => {
    const {name, value} = event.target
    setConsignee({
      ...consignee,
      [name]: value
    })
  }

  const addConsignee = () => {
    consignee.id = consignees.length + 1
    console.log(consignee);
    consignees.push(consignee)
    setConsignees([...consignees])
  }




  return (<form onSubmit={handleSubmit}>

    <h2>View users</h2>
    <ConsigneeTables consignees={consignees}/>

    <Col xs="12" sm="12">
      <Card className="card-border">
        <CardBody>
          <Col xs="12" sm="12">
            <Card className="card-border">
              <CardBody>
                <FormGroup row>
                  <Col xs="12" lg="6">
                    <Field name="consignee_branch_number" type="text" component={FormInput} value={consignee.consignee_branch_number} onChange={handleInputChange} label="Branch Sr No" inputPlaceHolder="Enter Branch Sr No"/>
                  </Col>
                  <Col xs="12" lg="6">
                    <Field name="consignee_add1" type="textarea" component={FormInput} value={consignee.consignee_add1} onChange={handleInputChange} label="Address 1" inputPlaceHolder="Enter Address 1"/>
                  </Col>
                </FormGroup>

              </CardBody>

              <div style={{
                  paddingBottom: 30
                }}>
                <Button color="primary" className="btn-pill pull-right" type="button" onClick={addConsignee} style={{
                    marginRight: '20px'
                  }}>
                  Add
                </Button>
              </div>
            </Card>
          </Col>
          <div style={{
              paddingBottom: 30
            }}>
            <Button color="primary" className="btn-pill pull-left" onClick={previousPage} style={{
                marginLeft: '20px'
              }}>
              <i className="fa fa-chevron-left"/>
              &nbsp; Previous
            </Button>
            <Button color="primary" className="btn-pill pull-right" type="submit" style={{
                marginRight: '20px'
              }}>
              Next &nbsp;
              <i className="fa fa-chevron-right"/>
            </Button>
          </div>
        </CardBody>
      </Card>
    </Col>
  </form>);
};

ConsigneeLocations.propTypes = {
  handleSubmit: PropTypes.func,
  pristine: PropTypes.bool,
  previousPage: PropTypes.func,
  submitting: PropTypes.bool
};

export default reduxForm({form: 'consigneesLocation', destroyOnUnmount: false, forceUnregisterOnUnmount: true})(ConsigneeLocations);

我的数据表组件

import React from 'react'

const ConsigneeTables = props => (
  <table>
    <thead>
      <tr>
        <th>Branch Number</th>
      <th>Address</th>
      </tr>
    </thead>
    <tbody>
      {props.consignees.length > 0 ? (
        props.consignees.map(consignee => (
          <tr key={consignee.id}>
            <td>{consignee.consignee_branch_number}</td>
            <td>{consignee.consignee_add1}</td>
          </tr>
        ))
      ) : (
        <tr>
          <td colSpan={3}>No Data</td>
        </tr>
      )}
    </tbody>
  </table>
)

export default ConsigneeTables

请向我建议如何处理consignees state。我已经使用setState onClick了，但是我不知道如何处理每一步。