[英]React - can't get data from Redux
I'm attempting to load data from my state into my form and struggling. 我正在尝试将状态中的数据加载到表单中并且很费劲。
I login and save email and token into Redux state. 我登录并将电子邮件和令牌保存为Redux状态。 When I push to this test page that has a form inside it, I can't ever display the email inside the form. 当我推送到其中包含表单的测试页时,我永远无法在表单内显示电子邮件。 Why can't I load email? 为什么我不能加载电子邮件? I am able to see it on TestPage.js but not on TestForm. 我可以在TestPage.js上看到它,但在TestForm上却看不到。
TestPage.js 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 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.log("state = " + JSON.stringify(this.state));
}
componentDidMount(){
this.setState(this.props);
this.onInit(this.props);
console.log(" this props email = " + JSON.stringify(this.props));
console.log(" this state email = " + JSON.stringify(this.state.email ));
}
onInit = (props) => {
console.log(" this props email = " + JSON.stringify(this.props));
console.log(" 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="example@example.com"
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);
you have some errors and some useful things that you can improve, lets check them: 您有一些错误和一些可以改进的有用之处,请检查一下:
1) here you are setting this.props
to props
, that is not a good approach because it is confusing, actually you will have to access with this.props.props
which is not the desired naming convention. 1)在这里,您将this.props
设置为props
,这不是一个好方法,因为它会造成混淆,实际上,您将必须访问this.props.props
,这不是所需的命名约定。
<TestForm submit={this.submit} props={ this.props } />
change it into this, use the spread operator. 将其更改为此,请使用传播运算符。
<TestForm submit={this.submit} {...this.props } />
2) here, when you do this.setState(this.props);
2)在这里,当您执行this.setState(this.props);
as I said on #1, you will be setting an object and your props would be inside props. 就像我在#1上说的那样,您将设置一个对象,而您的道具将位于道具内部。 so when you do this.state.email
it should be this.state.props.email
. 因此,当您执行this.state.email
,应为this.state.props.email
。
componentDidMount(){
this.setState(this.props);
this.onInit(this.props);
console.log(" this props email = " + JSON.stringify(this.props));
console.log(" this state email = " + JSON.stringify(this.state.email ));
}
basically your props object would look like this: 基本上,您的props对象将如下所示:
{
"handleSubmit": function,
"props": {
"name" : '',
"email" : '',
"isActive" : true
}
}
so mapping that directly to the state would make that this.state.email
doesnt exist. 因此将其直接映射到状态将使this.state.email
不存在。
so, to fix this you need to use correctly your props, as I said, using props={something}
on the component will mislead your usage inside the component and that is what is happening to you right now. 因此,要解决此问题,您需要正确使用您的道具,正如我所说,在组件上使用props={something}
会误导您在组件内部的使用,而这就是您正在发生的事情。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.