javascript - React - 无法从 Redux 获取数据
问题描述
我正在尝试将数据从我的状态加载到我的表单中并且正在苦苦挣扎。
我登录并将电子邮件和令牌保存到 Redux 状态。当我推送到其中包含表单的测试页面时,我无法在表单中显示电子邮件。为什么我无法加载电子邮件?我可以在 TestPage.js 上看到它,但在 TestForm 上看不到。
测试页面.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="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);
解决方案
你有一些错误和一些可以改进的有用的东西,让我们检查一下:
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={something}
在组件上使用会误导你在组件内部的使用,这就是你现在正在发生的事情。
推荐阅读
- java - 将数据字符串拆分为多个变量(Java)
- php - 如何查询我们在 2 个自定义字段中的值之间的坐标?
- ruby-on-rails - 使用 AWS 的 Heroku 上的 TypeError(没有将数组隐式转换为字符串)Rails App
- angular - 从模板访问“this”(组件实例)
- python - 更改单元格值后,SQLAlchemy backref 为空白
- python - 数据框的原始值没有变化
- java - 在wildfly的单例中注入@RequestScoped变量
- tomcat - Tomcat 404 使用类时
- vagrant - 我的 Vagrant Sotch io 3.5 机器将提供网页服务,但不会服务于端口 8000 上的主机
- presentation - 在 Google 幻灯片演示期间编辑文本