javascript - 这些错误阻止我的 nodejs 应用程序加载
问题描述
我在渲染页面时遇到这些错误。我的项目基于 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;
解决方案
在material-ui github上查看这个问题https://github.com/mui-org/material-ui/issues/18119
您正在使用 Material-ui 中的 Tooltip 并且他的孩子必须是一个元素,当您使用时:{`Block: ${num}`}
这是错误的。尝试使用 a ,如下所示:<span>{`Block: ${num}`}</ span>
它必须是一个元素,因此 material-ui 可以从中传递参考。如果您查看 theis 文档,您会发现它必须是一个元素https://material-ui.com/pt/api/tooltip/
推荐阅读
- javascript - 使用 vue 和 node js 将 JSON 文件上传到我的服务器
- javascript - 从按对象标识符分组的列表中查找最小值/最大值
- excel - 将两列中的数据复制到一列 - Excel
- python - 从 Beautifulsoup4 获取字符串的问题
- amcharts - 工具提示没有反映我想要的。安查特
- html - 不使用 div 包裹的圆形按钮
- python - Python:要求打印时不输出
- javascript - 在 React 上更改 Route 时,Header 组件不断重新渲染
- java - Hibernate 没有在 src 文件夹中找到 hibernate.cfg.xml,但它在那里
- java - RxJava 中的中断循环