javascript - 无法读取未定义的属性 'rejected' | ReactJS

Question

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

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

Answer 1

<LoginForm />不提供任何 Prop 。

this.props如果您像这样提供它，则不会是未定义的: <LoginForm token={this.props.token} />如果你不显式写的话 props 不会被传递，你可以一一写，但你也可以这样输入:<LoginForm {...this.props} />