将this.props。“ value”传递给onSubmit时未定义

Question

这个想法是将名称，电子邮件，电话，端口和专业传递给addSupplier-action，但是当我尝试将其传递到Firebase时，我传递的值似乎不确定。 在这里，我们有一个组件，您可以在下面找到执行Firebase查询的操作。我收到以下错误：

  

错误：Reference.push失败：第一个参数包含未定义的   属性“ suppliers.name”

  class SupplierForm extends React.Component {
    addSupplierClick() {
        const { name, email, phone, port, speciality } = this.props;
        this.props.addSupplier({ name, email, phone, port, speciality});
    }
    onNameChanged(text) {
     this.props.nameChanged(text);
   }
   onEmailChanged(text) {
     this.props.emailChanged(text);
   }
   onPhoneChanged(text) {
     this.props.phoneChanged(text);
  }

 render() {
   const { name, email, phone, port, speciality } = this.props;

   return(

      <Form onSubmit={this.addSupplierClick.bind(this)}>
          <Form.Field>

              <label htmlFor="name"> Name </label>
              <input
                  type="name"
                  id="name"
                  name="name"
                  placeholder="Ola Nordmann"
                  value={name}
                  onChange={this.onNameChanged.bind(this)}
               />

          </Form.Field>

          <Form.Field>
              <label htmlFor="email"> Email </label>
              <input
                  type="email"
                  id="email"
                  name="email"
                  placeholder="Ola.Nordmann@gmail.com"
                  value={email}
                  onChange={this.onEmailChanged.bind(this)}
               />

          </Form.Field>

          <Form.Field>
              <label htmlFor="phone"> Phone </label>
              <input
                  type="phone"
                  id="phone"
                  name="phone"
                  placeholder="99009900..."
                  value={phone}
                  onChange={this.onPhoneChanged.bind(this)}
               />

          </Form.Field>

          <Form.Field>
              <label htmlFor="port"> Port </label>
              <input
                  type="port"
                  id="port"
                  name="port"
                  placeholder="Miami, Bergen..."
                  value={port}
               />

          </Form.Field>

          <Form.Field>
              <label htmlFor="speciality"> Speciality </label>
              <input
                  type="speciality"
                  id="speciality"
                  name="speciality"
                  placeholder="Glass, divers..."
                  value={speciality}
               />

          </Form.Field>

          <Form.Field>
          <Button className="button" >
                Add supplier
          </Button>
          </Form.Field>
    </Form>


   )}
}

 const mapStateToProps = ({ suppAdd }) => {
   const { name, email, phone, port, speciality } = suppAdd;
     return {
      name,
      email,
      phone,
      port,
      speciality
   };
 };

 export default connect(mapStateToProps, {nameChanged, emailChanged, 
 phoneChanged, addSupplier})(SupplierForm);

动作类：

import fire from '../fire'
import {
    ....
    ADD_SUPPLIER
} from './types';


export const addSupplier = ({
    name,
    email,
    phone,
    port,
    speciality
}) => {

    return (dispatch) => {
        dispatch({
            type: ADD_SUPPLIER
        });

        addSupplierInFirebase({
            name,
            email,
            phone,
            port,
            speciality
        });
    }
}

const addSupplierInFirebase = ({
    name,
    email,
    phone,
    port,
    speciality
}) => {
    fire.database().ref(`/suppliers`).push({
        name,
        email,
        phone,
        port,
        speciality
    });
}