Приложение React-Redux: «props» не определено - PullRequest
Новая
       45

Приложение React-Redux: «props» не определено

0 голосов
/ 10 июля 2019

Я создаю приложение 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;

Navbar.js 

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;

1 Ответ

1 голос
/ 10 июля 2019

В вашем Login.js он написан с использованием синтаксиса на основе классов, следовательно, он должен быть this.props вместо props

<Modal show={this.props.modalOpen} onHide={this.props.handleModalOpen}>

В качестве альтернативы, Login.js можно переписать в functional-based component, затем вы можете использовать props, как показано ниже 


const Login = props => {
  return (
    <Modal show={props.modalOpen} onHide={props.handleModalOpen} />
  )
}
...