React-无法从 Redux 获取数据
2018-05-04
283
我试图将状态中的数据加载到表单中,但遇到了麻烦。
我登录并将电子邮件和令牌保存到 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.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="[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);
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.log(" this props email = " + JSON.stringify(this.props));
console.log(" this state email = " + JSON.stringify(this.state.email ));
}
基本上您的 props 对象看起来像这样:
{
"handleSubmit": function,
"props": {
"name" : '',
"email" : '',
"isActive" : true
}
}
因此将其直接映射到状态将使
this.state.email
不存在。
因此,要解决这个问题,您需要正确使用您的 props,正如我所说,在组件上使用
props={something
会误导您在组件内部的使用,而这正是现在发生在您身上的事情。
Prince Hernandez
2018-05-04