Почему: не удается прочитать свойство 'email' из неопределенного?Реагировать-дом

Question

Мне нужно использовать свое состояние в другом компоненте, я отправил его с такими же реквизитами.

Хорошо, это мой контейнер ./HandleForm.

import React, { PureComponent } from "react";

import NotLoggedRegisterForm from "./NotLoggedRegisterForm";

export default class HandleForm extends PureComponent {
  state = {
    data: {
      email: "",
      password: "",
      confirmPassword: ""
    }
  };

  handleChange = e => {
    this.setState({ ...this.state.data, [e.target.name]: e.target.value });
  };

  render() {
    return (
      <div>
        <NotLoggedRegisterForm data={this.state.data} />
      </div>
    );
  }
}

это частькомпонента, который получает реквизит.

const { data } = props.data;

<Input
        prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
        type="email"
        placeholder="Email"
        name="email"
        onChange={props.handleChange}
        value={data.email}
      />

И я получаю этот код ошибки:

TypeError
Cannot read property 'email' of undefined
NotLoggedRegisterForm
/src/pages/logged/not/registerForm/NotLoggedRegisterForm.js:38:24
  35 |       placeholder="Email"
  36 |       name="email"
  37 |       onChange={props.handleChange}
> 38 |       value={data.email}
     |                  ^
  39 |     />
  40 |   )}
  41 | </FormItem>

Answer 1

в вашем коде

const { data } = props.data неверно.

Поскольку props содержит data, а props.data не содержит data, поэтому вы можете изменить это следующим образом.

const data = props.data;
// or you may use "const {data} = props;"

<Input
        prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
        type="email"
        placeholder="Email"
        name="email"
        onChange={props.handleChange}
        value={data.email}
      />

Answer 2

изменить

const { data } = props.data;

на

const { data } = props;