Reactjs React Redux应用程序：'；道具'；未定义'；

我正在创建React Redux应用程序。在添加上面的内容

render（）

之前，定义了

props

。然而，在我开始添加上述内容后，应用程序在读取变量时开始出现问题。我不知道发生了什么事

有人能帮我理解为什么

props

不再被识别吗？我真的很感激

Login.js

import React from 'react';
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import './login.css';

class LoginForm extends React.Component { 
  constructor(props) {
    super(props);
    this.state = {
      username: ''
    }

    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value});
  }

render() {
    return (
        <>
          <Modal show={props.modalOpen} onHide={props.handleModalOpen}>
            <Modal.Header closeButton>
              <Modal.Title>Login</Modal.Title>
            </Modal.Header>
          <Modal.Body>
              <Form>
                <Form.Group>
                  <Form.Label>Username</Form.Label>
                  <Form.Control 
                    type="text"
                    name="username"
                    className="form-control"
                  />
                </Form.Group>

                <Form.Group>
                  <Form.Label>Password</Form.Label>
                  <Form.Control 
                    type="text"
                    name="password"
                    className="form-control"
                  />
                </Form.Group>
              </Form>
            </Modal.Body>
            <Modal.Footer>
              <Button variant="danger" type="submit" onClick={props.handleModalOpen}>
                Submit
              </Button>
              <Button variant="primary" onClick={props.handleClose}>
                Cancel
              </Button>
            </Modal.Footer>  
          </Modal>
        </>
     );
  }
}

export default LoginForm;

import React from "react";
import { Link } from 'react-router-dom';
import './navbar.css';
import LoginForm from '../LoginForm/login.js';
// import SignUpModal from '../SignUpModal/signup.js';


class Navbar extends React.Component {
  state = {
     modalOpen: false
  }

  handleModalOpen = () => {
     this.setState((prevState) => {
        return {
           modalOpen: !prevState.modalOpen
        }
     })
  }

  render() {
    return (
      <div>
        <nav className="navbar navbar-expand-sm navbar-dark px-sm-5">
            <div className="container">
                <Link to='/'>
                    <div className="navbar-brand">
                        <i class="fas fa-globe fa-2x"></i>
                    </div>
                </Link>

                <ul className="navbar-nav align-items-right">
                    <li className="nav-item ml-5">
                        <a onClick={this.handleModalOpen} className="nav-link">
                            Login
                        </a>
                    </li>
                    <li className="nav-item ml-5">
                        <a onClick={this.handleModalOpen} className="nav-link">
                            Sign Up
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <LoginForm
           modalOpen={this.state.modalOpen}
           handleModalOpen={this.handleModalOpen}
        />
        {/* <SignUpModal
           modalOpen={this.state.modalOpen}
           handleModalOpen={this.handleModalOpen}
        /> */}
      </div>
    )
  }
}

export default Navbar;

从“React”导入React；
从“反应引导/模式”导入模式；
从“react引导/表单”导入表单；
从“反应引导/按钮”导入按钮；
导入“./login.css”；
类LoginForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”
}
this.onChange=this.onChange.bind（this）；
}
onChange（e）{
this.setState（{[e.target.name]：e.target.value}）；
}
render（）{
返回(
登录
用户名
暗语
提交
取消
);
}
}
导出默认登录信息；

Navbar.js

import React from 'react';
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import './login.css';

class LoginForm extends React.Component { 
  constructor(props) {
    super(props);
    this.state = {
      username: ''
    }

    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({ [e.target.name]: e.target.value});
  }

render() {
    return (
        <>
          <Modal show={props.modalOpen} onHide={props.handleModalOpen}>
            <Modal.Header closeButton>
              <Modal.Title>Login</Modal.Title>
            </Modal.Header>
          <Modal.Body>
              <Form>
                <Form.Group>
                  <Form.Label>Username</Form.Label>
                  <Form.Control 
                    type="text"
                    name="username"
                    className="form-control"
                  />
                </Form.Group>

                <Form.Group>
                  <Form.Label>Password</Form.Label>
                  <Form.Control 
                    type="text"
                    name="password"
                    className="form-control"
                  />
                </Form.Group>
              </Form>
            </Modal.Body>
            <Modal.Footer>
              <Button variant="danger" type="submit" onClick={props.handleModalOpen}>
                Submit
              </Button>
              <Button variant="primary" onClick={props.handleClose}>
                Cancel
              </Button>
            </Modal.Footer>  
          </Modal>
        </>
     );
  }
}

export default LoginForm;

import React from "react";
import { Link } from 'react-router-dom';
import './navbar.css';
import LoginForm from '../LoginForm/login.js';
// import SignUpModal from '../SignUpModal/signup.js';


class Navbar extends React.Component {
  state = {
     modalOpen: false
  }

  handleModalOpen = () => {
     this.setState((prevState) => {
        return {
           modalOpen: !prevState.modalOpen
        }
     })
  }

  render() {
    return (
      <div>
        <nav className="navbar navbar-expand-sm navbar-dark px-sm-5">
            <div className="container">
                <Link to='/'>
                    <div className="navbar-brand">
                        <i class="fas fa-globe fa-2x"></i>
                    </div>
                </Link>

                <ul className="navbar-nav align-items-right">
                    <li className="nav-item ml-5">
                        <a onClick={this.handleModalOpen} className="nav-link">
                            Login
                        </a>
                    </li>
                    <li className="nav-item ml-5">
                        <a onClick={this.handleModalOpen} className="nav-link">
                            Sign Up
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <LoginForm
           modalOpen={this.state.modalOpen}
           handleModalOpen={this.handleModalOpen}
        />
        {/* <SignUpModal
           modalOpen={this.state.modalOpen}
           handleModalOpen={this.handleModalOpen}
        /> */}
      </div>
    )
  }
}

export default Navbar;

从“React”导入React；
从'react router dom'导入{Link}；
导入“/navbar.css”；
从“../LoginForm/login.js”导入LoginForm；
//从“../SignUpModal/signup.js”导入SignUpModal；
类Navbar扩展了React.Component{
状态={
莫达洛彭：错
}
手足龙=（）=>{
this.setState（（prevState）=>{
返回{
modalOpen:！prevState.modalOpen
}
})
}
render（）{
返回(


登录


注册


{/*  */}
)
}
}
导出默认导航栏；

在您的

Login.js

中，它是使用基于类的语法编写的，因此它必须是

this.props

而不是

props

或者，可以将

Login.js

重写为

基于功能的组件

，然后您可以像下面那样使用

道具

const Login=props=>{
返回(
)
}

很清楚，在构造函数中，它是

props

参数，所以它是可以的。在班上其他任何地方，这个答案都是正确的@艾萨克哇，真不敢相信我错过了。非常感谢@EmileBergeron：因此，我提供了抛出错误的

Modal

的确切行，以及另一个基于函数的示例component@GalaXee95：很乐意帮忙，如果它正确回答了您的问题，请将其标记为答案：）是的，正如我所说的，您是对的（投票结果也较高）；）如果您想要一个具有状态的函数组件，那么现在还有钩子。