Я пытаюсь загрузить данные из моего состояния в свою форму и борюсь.
Я вхожу в систему и сохраняю электронную почту и токен в состоянии 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);



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


у вас есть ошибки и некоторые полезные вещи, которые вы можете улучшить, давайте проверим их:
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} в компоненте введет в заблуждение ваше использование внутри компонента, и именно это происходит с вами прямо сейчас.
Загляните внутрь своей функции mapStateToProps в форме, вы делаете this.state, должно быть только состояние