[英]React - can't get data from 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.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}
會誤導您在組件內部的使用,而這就是您正在發生的事情。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.