ReactJS:TypeError:无法读取null的属性(阅读“useRef”)

hwamh0ep  于 2023-05-06  发布在  React
关注(0)|答案(3)|浏览(980)

我在生产环境中的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;
8dtrkrch

8dtrkrch1#

路由失败的原因是我在react组件中使用的一个包。是package.json提到的"react": ">=16"
几天前,react v18发布了。prod机器在node_modules中更新了这个包。该软件包不支持此功能,因此失败。
在本地,node_modules不经常更新。正因为如此,它在当地工作,在生产中失败。
吸取的教训:

  • 将软件包版本命名为~version^version。检查here
xfb7svmp

xfb7svmp2#

const scrollTopRef = useRef(null);

这基本上意味着scrollTopRef的值是null。然后你正在使用scrollTopRef.current,这意味着你正在尝试访问current属性,这是一个错误。因此,您需要将scrollTopRef设置为某个有意义的值。
useRef Hook允许您在渲染之间保持值。
它可用于存储在更新时不会导致重新呈现的可变值。

ghhaqwfi

ghhaqwfi3#

对于“ERROR”的简单解决方案是,通过编写“npm install react-router-dom”来安装react-router-dom的最新版本

相关问题