我的 Login.js
文件变得越来越大,因此我决定在单独的文件 LoginForm.js
中创建一个可重用的组件。然而,当我将前面的代码从 Login.js
提取到 LoginForm.js
后,我的一个 props 变得未定义,我不知道为什么。
属性未定义: this.props.token
我已经导入了所有模块并比较了代码,一切似乎都是正确的。
文件 1
在Login.js
中我有这个:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createToken } from '../../actions/tokenActions'
import LoginForm from './LoginForm'
// Styles
import Typography from 'material-ui/Typography'
import Card, { CardActions, CardContent } from 'material-ui/Card'
import Button from 'material-ui/Button'
import { CircularProgress } from 'material-ui/Progress'
import injectSheet from 'react-jss'
class Login extends Component {
constructor(props) {
super(props)
this.state = {}
}
onFormSubmit(e) {
e.preventDefault()
this.props.createToken(this.state)
}
render() {
const progressBar = this.props.token.pending
? <CircularProgress className={this.props.progress} />
: ''
return (
<div className="box" style={{ margin: '100px auto', width: '300px' }}>
{progressBar}
<form
onSubmit={this.onFormSubmit.bind(this)}
style={{ display: this.props.token.pendling ? 'none' : 'block' }}
>
<LoginForm />
</form>
</div>
)
}
}
const mapState = state => {
return {
token: state.token
}
}
const mapDispatch = (dispatch, props) => ({
createToken: data => dispatch(createToken(data))
})
export default connect(mapState, mapDispatch)(Login)
文件2
在我的另一个文件 LoginForm.js
中,我有这个:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createToken } from '../../actions/tokenActions'
//Styles
import Card, { CardActions, CardContent } from 'material-ui/Card'
import Button from 'material-ui/Button'
import Typography from 'material-ui/Typography'
export default class LoginForm extends Component {
constructor(props) {
super(props)
this.state = {}
}
onFormSubmit(e) {
e.preventDefault()
this.props.createToken(this.state)
}
render() {
console.log(this.props.token)
return (
<Card>
<CardContent>
<Typography
style={{
fontSize: '40px',
fontWeight: '300',
color: '#636363',
marginBottom: '20px'
}}
type="subheading"
gutterBottom
align="center"
>
Logga In
</Typography>
<input
type="text"
placeholder="Email"
onChange={e => this.setState({ email: e.target.value })}
/>
<input
type="password"
placeholder="Lösenord"
onChange={e => this.setState({ password: e.target.value })}
/>
<Button
raised
color="primary"
onClick={this.onFormSubmit.bind(this)}
className="text-center"
>
Skicka
</Button>
{this.props.token.rejected
? 'Felaktigt användarnamn eller lösenord'
: ''}
</CardContent>
</Card>
)
}
}
我敢打赌这是一个非常基本的问题,但除了这里我没有其他要问的。我真的很感谢所有的帮助!
最佳答案
<LoginForm />
不提供任何 Prop 。
this.props
如果您像这样提供它,则不会是未定义的: <LoginForm token={this.props.token} />
如果你不显式写的话 props 不会被传递,你可以一一写,但你也可以这样输入:<LoginForm {...this.props} />
关于javascript - 无法读取未定义的属性 'rejected' | ReactJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45022837/