ReactJS： TypeError： 無法讀取 null 的屬性(讀取 'useRef')

Question

我在生产中的react应用程序中遇到此错误：
TypeError: Cannot read properties of null (reading 'useRef')
启用源映射后，它在react.product.min.js中显示错误

奇怪的是，我只在一条特定的路线上得到这个。所有其他路由都运行良好(尽管我在多个文件中使用useRefs(

由于本地构建运行良好，我无法在本地复制此问题。

我尝试了以下方法：

1. 恢复到以前的工作提交
2. 在生产机器上重新安装node_modules
3. 从纱线到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;

Answer 1

路由失败，因为我在react组件中使用了一个包。是package.json提到了"react": ">=16"。

几天前，react v18发布。生产机器在node_modules中更新了此包。程序包不支持此功能，因此失败。

在本地，node_modules不频繁更新。正因为如此，它在当地发挥了作用，但在生产中失败了。

经验教训：

• 将软件包版本称为~version或^version。请在此处查看

Answer 2

const scrollTopRef = useRef(null);

这实质上意味着scrollTopRef的值是null。然后您使用的是scrollTopRef.current，这意味着您试图在null上访问current属性，这是一个错误。因此，您需要将scrollTopRef设置为某个有意义的值。

useRef Hook允许在渲染之间持久化值。

它可以用于存储一个可变值，该值在更新时不会导致重新呈现。

Answer 3

错误的简单解决方案是通过编写npm install react-router-dom来安装最新版本的react-router-dom。