我在生产环境中的react应用程序中得到了这个错误:TypeError: Cannot read properties of null (reading 'useRef')
开启sourcemap后,react.production.min.js显示错误
奇怪的是,我只在一条特定的路线上得到这个。所有其他路由都工作正常(即使我在多个文件中使用useRef
s。)
由于本地构建工作正常,我无法在本地重现该问题。
我尝试了以下方法:
1.恢复到上一个工作提交。
1.在生产机器上重新安装node_modules
1.从Yarn切换到NPM
我使用express来托管静态构建文件。代码如下:
const helmet = require('helmet');
const path = require('path');
const app = express();
const fs = require('fs');
app.disable('x-powered-by');
app.use(helmet.frameguard({ action: 'DENY' }));
app.use(express.static(__dirname));
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, 'index.html'), {
maxAge: 86400000,
});
});
app.listen(process.env.PORT || 8080, function () {
console.log(`Frontend start on http://localhost:8080`);
});
编辑:React组件:
import React, { useRef } from 'react';
const ConfigForm = (props) => {
const scrollTopRef = useRef(null);
const scrollToTop = () => {
if (scrollTopRef && scrollTopRef.current) {
scrollTopRef.current.scrollTo({
top: 0,
behavior: 'smooth',
});
}
};
const onButtonClick = () => {
scrollToTop();
}
return (
<div className="client-configs" ref={scrollTopRef}>
<button onClick={onButtonClick}>Scroll To Top</button>
</div>
);
}
export default ConfigForm;
3条答案
按热度按时间8dtrkrch1#
路由失败的原因是我在react组件中使用的一个包。是
package.json
提到的"react": ">=16"
。几天前,react v18发布了。prod机器在
node_modules
中更新了这个包。该软件包不支持此功能,因此失败。在本地,
node_modules
不经常更新。正因为如此,它在当地工作,在生产中失败。吸取的教训:
~version
或^version
。检查here。xfb7svmp2#
这基本上意味着
scrollTopRef
的值是null
。然后你正在使用scrollTopRef.current
,这意味着你正在尝试访问current
属性,这是一个错误。因此,您需要将scrollTopRef
设置为某个有意义的值。useRef Hook允许您在渲染之间保持值。
它可用于存储在更新时不会导致重新呈现的可变值。
ghhaqwfi3#
对于“ERROR”的简单解决方案是,通过编写“npm install react-router-dom”来安装react-router-dom的最新版本