React useEffect内调用scrollIntoView报null属性读取错误求助

这个报错的核心是执行document.getElementById('main-root')时，对应的DOM元素还未被挂载到页面中，方法返回null，调用null的scrollIntoView方法就触发了类型错误。
React不推荐直接使用document.getElementById操作DOM，一是依赖全局DOM状态可靠性低，二是出现重复ID时会产生预期外的问题，更合适的方案是使用React内置的useRef绑定目标元素。

按以下步骤修改代码即可：

1. 用React.useRef创建引用绑定目标滚动元素
2. 在useEffect中增加非空判断，确认元素挂载完成后再执行滚动逻辑

修改后的完整代码如下：

function BasicDetails() {
    // 创建ref绑定目标元素
    const mainRootRef = React.useRef(null);

    React.useEffect(()=>{
        scrollView();
    }, []);

    function scrollView() {
        // 增加非空判断，避免报错
        mainRootRef.current?.scrollIntoView({behavior: 'smooth'});
    }
    return (
        <Nav>
            {/* 把ref绑定到div上，不需要依赖id选择 */}
            <div ref={mainRootRef} style={{scrollBehavior: 'smooth'}}>
                <div>
                    <Header pageTitle={'Shop Settings'}/>
                    <Button
                        onClick={saveBasicDetails}
                        variant="contained"
                        id='save'
                        className={classes.saveButton}>
                        SAVE
                    </Button>
                </div>

                <BasicDetailsData style={{scrollBehavior: 'smooth'}} ref={childRef}/>
            </div>
        </Nav>
    );
}

如果你的项目环境不支持可选链语法，也可以用普通的if判断做非空校验：

function scrollView() {
  if (mainRootRef.current) {
    mainRootRef.current.scrollIntoView({behavior: 'smooth'});
  }
}

• 如果你的目标元素存在条件渲染（即用&&/三元表达式控制显隐），需要把控制元素显隐的状态变量加入useEffect的依赖数组，确保元素渲染完成后再触发滚动逻辑
• 你已经给元素添加了scrollBehavior: 'smooth'的行内样式，全局滚动行为统一的话可以省略scrollIntoView的behavior参数

内容的提问来源于stack exchange，提问作者Zenixo