为什么警告：未知事件处理程序属性`onSession`显示在 React 应用程序中？

Question

我对 React 还是很陌生，我有一个简单的应用程序，用户可以在其中通过单击“登录”按钮时显示的模式窗口登录。用户数据存储在 MongoDB 集合中，以验证用户在模式窗口中输入的电子邮件和密码，应用程序向服务发送请求，该服务返回登录用户的数据，如果发生任何错误，则不返回任何内容。如果用户存在，则 id 存储在本地存储中，则必须将其重定向到另一个页面。问题是显然方法'onSession'不存在因此产生警告：“事件处理程序的未知属性onSession”。

我创建了三个组件：“LoginForm.js”、“LoginModal.js”和“Menu.js”。第一个具有电子邮件和密码字段以及登录验证，第二个具有模式窗口的属性，最后一个用于显示“登录”按钮的导航栏。

LoginForm.js：

import React from 'react';
import { Col, Row, Form, Stack, Button, Image } from 'react-bootstrap';
import LoginIMG from '../../../assets/login.png'
import './LoginForm.css';

class LoginForm extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
           email: '',
           password: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
    event.preventDefault();
    if(this.state.email === '' || this.state.password === '') {
        alert('You must fill all inputs');
    }else{
        fetch('http://localhost:8080/api/user/'+this.state.email+'/'+this.state.password)
        .then(res => res.json())
        .then(data => {
            if(data.id !== null) {
                localStorage.setItem('idUser', data.id);
                this.props.onHide();
                this.props.onSession();
            }else{
                alert('Wrong password or username');
            }
        });
    }
}

handleChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({
        [name]: value
    });
}


render() {
    return (
        <div className="form">
            <br />
            <Row className="justify-content-md-center">
                <Form onSubmit={this.handleSubmit}>
                    <Stack gap={3}>
                        <Row className="justify-content-md-center">
                            <Col lg={6} md={4} className='text-center'>
                                <Image src={LoginIMG} className="avatar" roundedCircle />
                            </Col>
                        </Row>
                        <Row className="justify-content-md-center">
                            <Col lg={6}>
                                <Form.Group controlId="formEmail">
                                    <Form.Label>Email</Form.Label>
                                    <Form.Control type="email" name="email" value={this.state.email} onChange={this.handleChange} placeholder="Enter email" />
                                </Form.Group>
                            </Col>
                        </Row>
                        <Row className="justify-content-md-center">
                            <Col lg={6}>
                                <Form.Group controlId="formPassword">
                                    <Form.Label>Password</Form.Label>
                                    <Form.Control type="password" name="password" value={this.state.password} onChange={this.handleChange} />
                                </Form.Group>
                            </Col>
                        </Row>
                        <Row className="justify-content-md-center">
                            <Col lg={6} className="d-grid gap-2">
                                <Button type="submit" variant="success" size="lg">Login</Button>
                            </Col>
                        </Row>
                    </Stack>
                </Form>
            </Row>
        </div>
    );
  }
}

export default LoginForm;

LoginModal.js：

import LoginForm from '../../forms/loginForm/LoginForm'
import { Modal } from 'react-bootstrap'; 
import './LoginModal.css';

function LoginModal(props){
   return (
       <Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered>
           <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                 {props.title}
              </Modal.Title>
           </Modal.Header>
           <Modal.Body>
               <LoginForm onHide={props.onHide} />
           </Modal.Body>
        <Modal.Footer>
            {/* <Button onClick={props.onHide}>Close</Button> */}
        </Modal.Footer>
    </Modal>
   );
}

export default LoginModal;

Menu.js：

import React from 'react';
import {Navbar, Nav, Container} from 'react-bootstrap';
import { Link } from "react-router-dom";
import LoginModal from '../../modals/loginModal/LoginModal';
import { useState } from 'react';


function Menu(){
    const [modalShow, setModalShow] = useState(false);
    const [idUser, setIdUser] = useState(0);

    const setSession = () => {
        if(localStorage.getItem('idUser') != null){
           setIdUser(localStorage.getItem('idUser'));
           console.log(idUser);
        }
    }

return(
    <>
        <Navbar bg="dark" expand="lg" variant="dark">
            <Container>
                <Link className='navbar-brand' to="/">Divina Comedia</Link>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Link className='nav-link' to="/">Home</Link>
                        {idUser === 0 ? <Nav.Link id="login" onClick={() => setModalShow(true)}>Login</Nav.Link> : null }
                        {idUser !== 0 ? <Link className='nav-link' to="/orders">Orders</Link> : null }
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
        <LoginModal show={modalShow} onHide={() => setModalShow(false)} onSession={() => setSession()} />
    </>
   );
}

export default Menu;

我真的不知道出了什么问题，感谢任何帮助。

Answer 1

onSession={() => setSession()}

这被传递到LoginModal，然后在 LoginModal.js 中将它传递到Modal：

<Modal {...props}

还有Modalultimately ends up putting it on a<div>。没有具有该名称的 dom 事件，因此您会收到错误消息。

如果该道具是为LoginModal 设计的，那么请确保您在那里处理它，并且不要使用扩展语法将其传递给 Modal。例如：

function LoginModal({ onSession, ...rest }){
  // Do something with the onSession prop

  return (
    <Modal {...rest} size="lg" aria-labelledby="contained-modal-title-vcenter" centered>
    // Or maybe do something with it here?
  )
}