This.props. "значение" не определено при передаче в onSubmit

Идея состоит в том, чтобы передать имя, адрес электронной почты, телефон, порт и специальность в действие addSupplier, но передаваемые мной значения кажутся неопределенными при попытке отправить их в firebase. Здесь у нас есть компонент, ниже которого вы можете найти действие, в котором выполняется запрос firebase. Я получаю следующую ошибку:

Error: Reference.push failed: first argument contains undefined in property '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 = "[email protected]"
                  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
    });
}

Если вы установите console.info (this.props.name) в начале функции addSupplierClick, будут ли отображаться соответствующие данные? также console.info (this.props.name) в функции рендеринга?

Ivo 10.08.2018 13:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
1
177
0

Другие вопросы по теме