React - не могу получить данные от Redux

Я пытаюсь загрузить данные из моего состояния в свою форму и борюсь.

Я вхожу в систему и сохраняю электронную почту и токен в состоянии Redux. Когда я нажимаю на эту тестовую страницу с формой внутри, я никогда не могу отобразить электронное письмо внутри формы. Почему я не могу загрузить электронную почту? Я могу увидеть это на TestPage.js, но не на TestForm.

TestPage.js

import React from "react";
import PropTypes from 'prop-types'; 
import { connect } from "react-redux";
import TestForm from "../forms/TestForm";

class TestPage extends React.Component {

  render() {
    const { isAuthenticated, email } = this.props;
    return (
      <div>
        { isAuthenticated && <h1> { email } </h1> }
        <TestForm submit = {this.submit} props = { this.props } />
      </div>
    );
  }
}

TestPage.propTypes = {
  email: PropTypes.string.isRequired,
  isAuthenticated : PropTypes.bool.isRequired
};

function mapStateToProps(state){
    return {
      email : state.user.email,
      isAuthenticated : !!state.user.token
    };
};

export default connect (mapStateToProps )(TestPage);

TestForm.js

import React from 'react'
import { Form, Button } from "semantic-ui-react";
import { connect } from "react-redux";

class TestForm extends React.Component {
  state = {
    name : '',
    email : '',
    isActive : true
  }

  onSubmit = e => { 
    e.preventDefault();
    console.info("state = " + JSON.stringify(this.state));
  }

  componentDidMount(){
    this.setState(this.props);
    this.onInit(this.props);
    console.info(" this props email =  " + JSON.stringify(this.props));
    console.info(" this state email =  " + JSON.stringify(this.state.email ));
  }

  onInit = (props) => {
    console.info(" this props email =  " + JSON.stringify(this.props));
    console.info(" this state email =  " + JSON.stringify(this.state.email ));
  }


  render() {

    const { state, loading } = this;

    const { handleSubmit } = this.props;  
   return (
      <div>
        <Form onSubmit = {this.onSubmit} loading = {loading}>
          <Form.Field >
            <label htmlFor = "email">Email</label>
            <input
              type = "email"
              id = "email"
              name = "email"
              placeholder = "[email protected]"
              value = {this.state.data.email}
              onChange = {this.onChange}
            />
          </Form.Field>
          <Button primary>Login</Button>
        </Form>
      </div>
    )
  }
};

function mapStateToProps(state){
    return {
      state : this.state
    };
}

export default connect(mapStateToProps)(TestForm);

Загляните внутрь своей функции mapStateToProps в форме, вы делаете this.state, должно быть только состояние

EQuimper 04.05.2018 16:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
159
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

у вас есть ошибки и некоторые полезные вещи, которые вы можете улучшить, давайте проверим их:

1) здесь вы устанавливаете this.props на props, это не лучший подход, потому что он сбивает с толку, на самом деле вам придется получить доступ с помощью this.props.props, что не является желаемым соглашением об именах.

<TestForm submit = {this.submit} props = { this.props } />

измените его на это, используйте оператор распространения.

<TestForm submit = {this.submit} {...this.props } />

2) здесь, когда вы делаете this.setState(this.props);, как я сказал в №1, вы устанавливаете объект, и ваши реквизиты будут внутри реквизита. поэтому, когда вы делаете this.state.email, это должен быть this.state.props.email.

componentDidMount(){
    this.setState(this.props);
    this.onInit(this.props);
    console.info(" this props email =  " + JSON.stringify(this.props));
    console.info(" this state email =  " + JSON.stringify(this.state.email ));
  }

в основном ваш объект props будет выглядеть так:

{
    "handleSubmit": function, 
    "props": {
        "name" : '',
        "email" : '',
        "isActive" : true
      }
}

поэтому сопоставление этого напрямую с состоянием привело бы к тому, что this.state.email не существует.

Итак, чтобы исправить это, вам нужно правильно использовать свои реквизиты, как я уже сказал, использование props = {something} в компоненте введет в заблуждение ваше использование внутри компонента, и именно это происходит с вами прямо сейчас.

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