这些错误使我的nodejs应用无法加载

编程问答 2022-08-11

问题描述

呈现页面时出现这些错误。 我的项目基于NodeJs + React。

我正在使用这些版本。 反应版本：^ 16.5 react-dome：^ 16.5 @ material-ui / core：^ 4.9.1 @ material-ui / icons：^ 4.9.1“

第一个错误：

Tooltip.js:479 Uncaught TypeError: Cannot read property 'className' of undefined
at Tooltip (Tooltip.js:479)
at renderWithHooks (react-dom.development.js:14803)
at updateForwardRef (react-dom.development.js:16816)
at beginWork (react-dom.development.js:18645)
at HTMLUnkNownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at beginWork$1 (react-dom.development.js:23203)
at performunitOfWork (react-dom.development.js:22157)
at workLoopSync (react-dom.development.js:22130)

第二个错误：

The above error occurred in the <ForwardRef(Tooltip)> component:
in ForwardRef(Tooltip) (created by WithStyles(ForwardRef(Tooltip)))
in WithStyles(ForwardRef(Tooltip)) (created by Block)
in div (created by Block)
in Block (created by BlockAnimation)
in div (created by PoseElement)
in PoseElement (created by Context.Consumer)
in UnkNown (created by BlockAnimation)
in Transition (created by PoseGroup)
in PoseGroup (created by BlockAnimation)
in div (created by BlockAnimation)
in BlockAnimation (created by Route)
in Route (created by withRouter(BlockAnimation))
in withRouter(BlockAnimation) (created by Navigation)
in div (created by Navigation)
in div (created by Navigation)
in div (created by ForwardRef(Toolbar))
in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
in WithStyles(ForwardRef(Toolbar)) (created by Navigation)
in header (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (created by ForwardRef(AppBar))
in ForwardRef(AppBar) (created by WithStyles(ForwardRef(AppBar)))
in WithStyles(ForwardRef(AppBar)) (created by Navigation)
in div (created by Navigation)
in Navigation (created by Connect(Navigation))
in Connect(Navigation) (created by Route)
in Route (created by withRouter(Connect(Navigation)))
in withRouter(Connect(Navigation)) (created by ReduxWrapper)
in div (created by ReduxWrapper)
in ReduxWrapper (created by Connect(ReduxWrapper))
in Connect(ReduxWrapper) (created by Root)
in div (created by Root)
in Root (created by Route)
in Route
in div
in Router (created by ConnectedRouter)
in ConnectedRouter
in Provider
in AppContainer

我不知道这是什么意思。

Errors are thrown into this page.

使用这样的工具提示：

    import React,{ Component } from 'react';
    import Tooltip from '@material-ui/core/Tooltip';
    import styles from './styles.css';
    
    class Block extends Component
    {
            state = {tooltipOpen:false};
    
        open = () => {
            this.setState({
                tooltipOpen: true
            });
        }
    
        close = () => {
            this.setState({
                tooltipOpen: false
            });
        }
    
        render ()
        {
            const {
                state: { tooltipOpen },props:{num}
            } = this;
            return (
                <div>
                    <div id={`block${num}`} className={`${styles['bar']} d-inline-flex`} onClick={(i)=>this.props.onClick({num})}></div>
                    <Tooltip title={`block${num}`} placement="bottom" open={tooltipOpen} onopen={this.open}
                        onClose={this.close}
                        enterDelay={250}>
                        {`Block: ${num}`}
                    </Tooltip>
                </div>
            );
        }
    }
    
    export default Block;

解决方法

在material-ui github https://github.com/mui-org/material-ui/issues/18119

上查看此问题

您正在使用material-ui中的Tooltip，并且在使用{`Block: ${num}`}时，他的孩子必须是元素，这是错误的。尝试将其与一起使用，例如：<span>{`Block: ${num}`}</ span>

它必须是一个元素，以便material-ui可以将引用从其传递出去。如果查看theis文档，您将看到它必须是元素https://material-ui.com/pt/api/tooltip/

javascriptreact-domreact-tooltipreactjsreactjsreactjsreactjs