Material UI Slider滑动报错：Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')

问题原因 #

你把CibilScoreFilterComponent定义在了父组件内部，每次父组件重新渲染时，这个内部组件都会被重新创建，导致Slider关联的DOM元素被频繁卸载和重建，滑动时组件找不到对应的DOM节点，就会抛出Cannot read properties of null (reading 'getBoundingClientRect')错误，同时导致滑动不流畅。

修复方案 #

方案1：将组件移到父组件外部 #

把CibilScoreFilterComponent从父组件的作用域中抽离出来，作为独立组件存在，避免每次父组件渲染时重新创建组件：

import { useState } from 'react';
import Slider from '@mui/material/Slider';

// 独立定义组件，放在父组件外部
const CibilScoreFilterComponent = ({ cibilScoreRange, handleCibilScoreChange }) => {
    return (
        <div className="slider-wrapper">
            <Slider
                min={300}
                max={900}
                value={cibilScoreRange}
                onChange={handleCibilScoreChange}
                valueLabelDisplay="on"
            />
        </div>
    )
}

// 父组件
const ParentComponent = () => {
    const [cibilScoreRange, setCibilScoreRange] = useState<number[]>([300, 900]);

    const handleCibilScoreChange = (event: Event, newScoreRange: number | number[]) => {
        setCibilScoreRange(newScoreRange as number[]);
    };

    return <CibilScoreFilterComponent cibilScoreRange={cibilScoreRange} handleCibilScoreChange={handleCibilScoreChange} />;
}

方案2：将内部组件改为渲染函数 #

如果不想抽离组件，也可以把CibilScoreFilterComponent改成一个普通的渲染函数，而不是React组件：

const ParentComponent = () => {
    const [cibilScoreRange, setCibilScoreRange] = useState<number[]>([300, 900]);

    const handleCibilScoreChange = (event: Event, newScoreRange: number | number[]) => {
        setCibilScoreRange(newScoreRange as number[]);
    };

    // 改成普通函数，不是组件
    const renderCibilSlider = () => {
        return (
            <div className="slider-wrapper">
                <Slider
                    min={300}
                    max={900}
                    value={cibilScoreRange}
                    onChange={handleCibilScoreChange}
                    valueLabelDisplay="on"
                />
            </div>
        )
    }

    return <>{renderCibilSlider()}</>;
}

方案3：用useMemo缓存内部组件 #

如果必须在父组件内定义组件，可以用useMemo缓存组件，避免重复创建：

import { useState, useMemo } from 'react';
import Slider from '@mui/material/Slider';

const ParentComponent = () => {
    const [cibilScoreRange, setCibilScoreRange] = useState<number[]>([300, 900]);

    const handleCibilScoreChange = (event: Event, newScoreRange: number | number[]) => {
        setCibilScoreRange(newScoreRange as number[]);
    };

    // 用useMemo缓存组件，依赖项为用到的state和函数
    const CibilScoreFilterComponent = useMemo(() => {
        return () => (
            <div className="slider-wrapper">
                <Slider
                    min={300}
                    max={900}
                    value={cibilScoreRange}
                    onChange={handleCibilScoreChange}
                    valueLabelDisplay="on"
                />
            </div>
        )
    }, [cibilScoreRange, handleCibilScoreChange]);

    return <CibilScoreFilterComponent />;
}

额外说明 #

确保你已经正确安装并导入了Material UI的Slider组件，使用的依赖版本和官方文档匹配（如@mui/material v5版本）。

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