這些錯誤阻止了我的 nodejs 應用程序加載

Question

我在渲染頁面時收到這些錯誤。 我的項目基於 NodeJs + React。

我正在使用這些版本。 反應版本：^16.5 反應圓頂：^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

我無法弄清楚這是什么意思。

錯誤被拋出到這個頁面。

使用這樣的工具提示：

    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;

Answer 1

在 material-ui github https://github.com/mui-org/material-ui/issues/18119上查看此問題

您正在使用 material-ui 的 Tooltip 並且他的孩子必須是一個元素，當您使用： {`Block: ${num}`}時是錯誤的。 嘗試使用它，就像這樣： <span>{`Block: ${num}`}</ span>

它必須是一個元素，以便 material-ui 可以從中傳遞 ref。 如果您查看theis docs，您將看到它必須是一個元素https://material-ui.com/pt/api/tooltip/