React类组件中Intersection Observer导航按钮渲染异常求助

我为朋友开发的酒吧网站菜单页中，hero区域后的分类选择器左右导航按钮存在渲染不稳定问题：有时显示有时不显示，Ctrl+F5刷新大概率能复现。

实现逻辑是用Intersection Observer监听分类选择器首尾按钮的可见性，以此控制导航按钮的显示/隐藏。怀疑是.observe()调用时机有误，但控制台无报错。

组件通过createObserver创建观察者，在componentDidUpdate中获取DOM元素并调用.observe，曾尝试包裹window.onload或移至componentDidMount，问题仍存在。完整组件代码如下：

import React from 'react';

import SelectorButton from './SelectorButton';

class CategorySelector extends React.Component {
    constructor(props){
        super(props);

        this.scrollTo = this.scrollTo.bind(this)
        this.createObserver = this.createObserver.bind(this)

        this.state = {
            scrollbox: null
        }
    }

    componentDidMount() {
        /* When Component is mounted, add scrollbox to state, to be used later */
        this.setState({scrollbox: document.querySelector(".cselector-scrollBox")});
    }

    componentDidUpdate() {
        /* Get DOM Element we want to observe */
        const buttons = Array.from(document.querySelectorAll('.cselector-scrollBox button'));
        
        /* Get Nav-Buttons whose visibility we want to toggle */
        const nextButton = document.getElementById("nextbutton");     
        const prevButton = document.getElementById("prevbutton");

        /* Create Intersection Observers */
        const firstObserver = this.createObserver(prevButton);
        const lastObserver = this.createObserver(nextButton);

        /* Wrap in window.onload to make sure page has finished loading before setting observers */
        window.onload = function() {
            firstObserver.observe(buttons[0]);
            lastObserver.observe(buttons[buttons.length - 1]);
        }
    }

    /* Scrolls to position in slider by passing an offset. Snap-Slider-Css does heavy lifting on alignment */
    scrollTo(offset) {
        const scrollbox = this.state.scrollbox;

        scrollbox.scrollBy({
            left: offset,
            behavior: "smooth"
        })
    }

    /* Returns an Intersection Observer, that toggles the visibility of arrow-nav-buttons */
    createObserver(target) {
        const options = {
            root: document.body,
            rootMargin: '0px',
            threshold: 0.5,
        };

        return new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                target.classList.toggle('cselector-navButton-show', !entry.isIntersecting)
            })
        }, options);
    }

    render() {
        return (
            <>
                <div className="d-flex align-items-center">
                    
                    <div>
                        { this.props.selectedCategory !== null &&
                            <button className="me-3 btn btn-primary btn-s d-inline deselect-button" 
                            onClick={this.props.deselectAll}>
                                <span className="col-primary"><i className="fa-solid fa-xmark"></i></span>
                        </button>}
                    </div>
                    
                    <div className='cselector-scrollWrapper'>
                        <button id="prevbutton" className="cselector-navButton prev" 
                            onClick={() => this.scrollTo(-200)}>
                                <span className="col-primary"><i className="fa-solid fa-chevron-left"></i></span>
                        </button>
                        
                        <div className="cselector-scrollBox py-2">
                            {
                                Array.from(this.props.categories).map(category => {
                                    return(
                                        <SelectorButton
                                            category={category}
                                            selectCategory={this.props.selectCategory} 
                                            selectedCategory={this.props.selectedCategory}
                                            key={`cat-${category.id}`} 
                                        />
                                    )
                                })
                            }
                        </div>
                        
                        <button id="nextbutton" className="cselector-navButton next" 
                            onClick={() => this.scrollTo(200)}>
                                <span className="col-primary"><i className="fa-solid fa-chevron-right"></i></span>
                        </button>
                    </div>

                </div>
            </>
        )
    }
}

export default CategorySelector;

import React from 'react';
import SelectorButton from './SelectorButton';

class CategorySelector extends React.Component {
    constructor(props){
        super(props);

        this.scrollTo = this.scrollTo.bind(this);
        this.createObserver = this.createObserver.bind(this);
        this.scrollboxRef = React.createRef();
        this.prevObserver = null;
        this.nextObserver = null;
    }

    componentDidMount() {
        // 初始化观察者
        this.initObservers();
    }

    componentDidUpdate(prevProps) {
        // 仅当categories变化时重新初始化观察者，避免重复执行
        if (prevProps.categories !== this.props.categories) {
            // 先销毁旧观察者
            this.cleanupObservers();
            this.initObservers();
        }
    }

    componentWillUnmount() {
        // 组件卸载时清理观察者
        this.cleanupObservers();
    }

    initObservers() {
        const scrollbox = this.scrollboxRef.current;
        if (!scrollbox) return;

        const buttons = Array.from(scrollbox.querySelectorAll('button'));
        if (buttons.length === 0) return;

        const nextButton = document.getElementById("nextbutton");     
        const prevButton = document.getElementById("prevbutton");

        // 创建观察者并开始监听
        this.prevObserver = this.createObserver(prevButton);
        this.nextObserver = this.createObserver(nextButton);

        this.prevObserver.observe(buttons[0]);
        this.nextObserver.observe(buttons[buttons.length - 1]);
    }

    cleanupObservers() {
        if (this.prevObserver) {
            this.prevObserver.disconnect();
            this.prevObserver = null;
        }
        if (this.nextObserver) {
            this.nextObserver.disconnect();
            this.nextObserver = null;
        }
    }

    scrollTo(offset) {
        const scrollbox = this.scrollboxRef.current;
        if (!scrollbox) return;

        scrollbox.scrollBy({
            left: offset,
            behavior: "smooth"
        });
    }

    createObserver(target) {
        const options = {
            // 修正root为滚动容器，而非body，确保可见性判断准确
            root: this.scrollboxRef.current,
            rootMargin: '0px',
            threshold: 0.5,
        };

        return new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                target.classList.toggle('cselector-navButton-show', !entry.isIntersecting);
            });
        }, options);
    }

    render() {
        return (
            <>
                <div className="d-flex align-items-center">
                    
                    <div>
                        { this.props.selectedCategory !== null &&
                            <button className="me-3 btn btn-primary btn-s d-inline deselect-button" 
                            onClick={this.props.deselectAll}>
                                <span className="col-primary"><i className="fa-solid fa-xmark"></i></span>
                        </button>}
                    </div>
                    
                    <div className='cselector-scrollWrapper'>
                        <button id="prevbutton" className="cselector-navButton prev" 
                            onClick={() => this.scrollTo(-200)}>
                                <span className="col-primary"><i className="fa-solid fa-chevron-left"></i></span>
                        </button>
                        
                        {/* 使用ref获取滚动容器，替代document.querySelector */}
                        <div className="cselector-scrollBox py-2" ref={this.scrollboxRef}>
                            {
                                Array.from(this.props.categories).map(category => {
                                    return(
                                        <SelectorButton
                                            category={category}
                                            selectCategory={this.props.selectCategory} 
                                            selectedCategory={this.props.selectedCategory}
                                            key={`cat-${category.id}`} 
                                        />
                                    )
                                })
                            }
                        </div>
                        
                        <button id="nextbutton" className="cselector-navButton next" 
                            onClick={() => this.scrollTo(200)}>
                                <span className="col-primary"><i className="fa-solid fa-chevron-right"></i></span>
                        </button>
                    </div>

                </div>
            </>
        )
    }
}

export default CategorySelector;

• 用React Ref替代document.querySelector：通过scrollboxRef直接绑定滚动容器，确保拿到的是当前组件渲染后的真实DOM元素，避免全局DOM查询的不可靠性。
• 控制观察者生命周期：
  • 组件挂载时初始化观察者，卸载时调用disconnect()清理，防止内存泄漏。
  • 仅当categories props变化时才重新创建观察者，避免componentDidUpdate重复执行导致多观察者冲突。
• 修正Observer的root配置：将root从document.body改为滚动容器本身，让可见性判断基于滚动区域内的显示情况，逻辑更准确。
• 移除window.onload：组件挂载时页面已加载完成，无需额外等待，直接初始化观察者即可。

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