Как устранить ошибку React: невозможно прочитать «Props» из неопределенного - PullRequest
Новая
       54

Как устранить ошибку React: невозможно прочитать «Props» из неопределенного

0 голосов
/ 25 марта 2020

Я пытаюсь интегрировать библиотеку под названием react-phone-number-input с моей многошаговой формой реагирования в качестве следующего функционального компонента: 

import React, { useState } from "react";
import Helmet from "react-helmet";
import "./reg-style/Credentail.css";
import "react-phone-number-input/style.css";
import PhoneInput from "react-phone-number-input";

export default function Credential() {
  const alter = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  const back = e => {
    e.preventDefault();
    this.props.prevStep();
  };

  const [values, handleChange] = this.props;
  const [value, setValue] = useState();
  return (
    <div>
      <Helmet>
        <body className="form-bg-col" />
      </Helmet>

      <div className="login">
        <div className="reg-container">
          <button onClick={back} className="col-form-prev">
            <i class="fa fa-chevron-left" />
          </button>
          <div className="user-detail email">
            Email:
            <input
              onChange={handleChange("Email")}
              defaultValue={values.Email}
              type="email"
              placeholder="Enter your Email"
            />
          </div>
          <div
            className="user-detail"
            onChange={handleChange("Phone")}
            defaultValue={values.Phone}
          >
            Phone:
            <PhoneInput
              displayInitialValueAsLocalNumber
              placeholder="Enter phone number"
              defaultCountry="IN"
              value={value}
              onChange={setValue}
            />
          </div>
          <div className="user-detail username">
            Username:
            <input
              onChange={handleChange("Username")}
              defaultValue={values.Username}
              type="text"
              placeholder="Select your unique Username"
            />
          </div>
          <div className="user-detail password">
            Password:
            <input
              onChange={handleChange("Password")}
              defaultValue={values.Password}
              type="password"
              placeholder="Choose your Password"
            />
          </div>

          <button onClick={alter} className="col-form-next">
            <i class="fa fa-chevron-right" />
          </button>
        </div>
      </div>
    </div>
  );
}

. ошибка: 

TypeError: Cannot read property 'props' of undefined
Credential
C:/Users/Rahul/Desktop/collegefacemash/src/form/register/Credential.js:78
  75 | import "react-phone-number-input/style.css";
  76 | import PhoneInput from "react-phone-number-input";
  77 | 
> 78 | export default function Credential(props) {
  79 |   const alter = e => {
  80 |     e.preventDefault();
  81 |     this.props.nextStep();

что я должен сделать, чтобы мое приложение работало?
Эта многошаговая форма вдохновлена: Многошаговая форма с пользовательским интерфейсом React & Material от Traversy Media
Ваша помощь будет чрезвычайно полезна для меня ...

1 Ответ

1 голос
/ 25 марта 2020

В функциональном компоненте вы не используете ключевое слово this.

Я изменил ваш код, чтобы он работал: 

import React, { useState } from "react";
import Helmet from "react-helmet";
import "./reg-style/Credentail.css";
import "react-phone-number-input/style.css";
import PhoneInput from "react-phone-number-input";

export default function Credential(props) {
  const alter = e => {
    e.preventDefault();
    props.nextStep();
  };

  const back = e => {
    e.preventDefault();
    props.prevStep();
  };

  const {values, handleChange} = props;
  const [value, setValue] = useState();
  return (
    <div>
      <Helmet>
        <body className="form-bg-col" />
      </Helmet>

      <div className="login">
        <div className="reg-container">
          <button onClick={back} className="col-form-prev">
            <i class="fa fa-chevron-left" />
          </button>
          <div className="user-detail email">
            Email:
            <input
              onChange={handleChange("Email")}
              defaultValue={values.Email}
              type="email"
              placeholder="Enter your Email"
            />
          </div>
          <div
            className="user-detail"
            onChange={handleChange("Phone")}
            defaultValue={values.Phone}
          >
            Phone:
            <PhoneInput
              displayInitialValueAsLocalNumber
              placeholder="Enter phone number"
              defaultCountry="IN"
              value={value}
              onChange={setValue}
            />
          </div>
          <div className="user-detail username">
            Username:
            <input
              onChange={handleChange("Username")}
              defaultValue={values.Username}
              type="text"
              placeholder="Select your unique Username"
            />
          </div>
          <div className="user-detail password">
            Password:
            <input
              onChange={handleChange("Password")}
              defaultValue={values.Password}
              type="password"
              placeholder="Choose your Password"
            />
          </div>

          <button onClick={alter} className="col-form-next">
            <i class="fa fa-chevron-right" />
          </button>
        </div>
      </div>
    </div>
  );
}

Можете ли вы увидеть, что я сделал ? 

line 7: added props param
line 10 & 15: removed "this"
line 18: removed "this" and changed from [values, handleChange] to {values, handleChange} in order to destructuring your props object
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...