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

Posted 2023-02-16

【中文标题】为啥警告：未知事件处理程序属性`onSession`显示在 React 应用程序中？

【英文标题】：Why the warning: Unknown event handler property `onSession` is displayed in React app?为什么警告：未知事件处理程序属性`onSession`显示在 React 应用程序中？

【发布时间】：2022-01-17 09:05:57

【问题描述】：

我对 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;

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

【参考方案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?
  )