Javascript 无法读取属性'；拒绝'；未定义的|反应

我的

Login.js

文件越来越大，所以我决定在一个单独的文件

LoginForm.js

中创建一个可重用组件。然而，在我将之前的代码从

Login.js

提取到

LoginForm.js

之后，我的一个道具变得不明确，我不知道为什么

未定义的道具：

此.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)

我打赌这是一个非常基本的问题，但除了这里，我没有别的问题要问。我真的很感谢所有的帮助

不提供任何道具

---

this.props

如果您这样提供，它就不会是未定义的：

如果您不显式地编写它，则不会传递props，您可以逐个编写它们，但您也可以这样键入：

很好。。那是一个尴尬的小姐哈哈！我会尽快接受你的答复！

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>
    )
  }
}