React Native中useRef无法访问RangeSlider的setLowValue方法问题

看起来你踩了一个很常见的useRef使用坑，我来帮你拆解问题并给出修复方案：

问题根源 #

你当前的useRef初始化完全错了：

const slider = useRef(66);

你把useRef初始化成了数字66，但它应该是用来存储组件实例引用的容器，初始值必须是null（或者undefined）。组件挂载前，slider.current就是你设置的66——一个普通数字，自然没有initialLowValue或者setLowValue这些组件实例的属性/方法，所以会报"不是函数/属性"的错误。

修复步骤 #

1. 正确初始化useRef

首先把useRef改成存储组件实例的空引用，同时用TypeScript指定类型（避免类型报错）：

const slider = useRef<RangeSlider>(null);

2. 在组件挂载后访问ref

useRef的current属性只有在组件挂载完成后才会被赋值为RangeSlider的实例，所以不能在组件函数顶层直接访问（第一次渲染时current还是null）。你需要用useEffect监听组件挂载完成的时机：

import { useEffect } from 'react';

// ... 其他代码

useEffect(() => {
  // 先判断current是否存在，避免null报错
  if (slider.current) {
    console.log('RangeSlider实例:', slider.current);
    // 现在可以正常调用setLowValue方法了
    // slider.current.setLowValue(55);
    
    // 另外，initialLowValue是你传给组件的props，直接用传入的size即可，不用从ref里拿
    console.log('初始值:', size);
  }
}, []); // 空依赖数组表示只在组件挂载后执行一次

3. 修正mapStateToProps的笔误

你原来的mapStateToProps返回的是height，但组件props接收的是size，这会导致Slider的初始值异常，需要修正：

function mapStateToProps(state: RootState) {
  return { size: state.sizeResult.size, };
}

完整修复后的代码 #

imports ...
import { useEffect, useRef } from 'react';

type Props = { size: number; setSize: (size: SizeState) => void; };
const Slider: React.FC<Props> = ({size, setSize}) => {
  // 正确初始化组件引用
  const slider = useRef<RangeSlider>(null);

  // 组件挂载后访问实例
  useEffect(() => {
    if (slider.current) {
      console.log('Slider组件实例:', slider.current);
      // 调用组件实例方法
      // slider.current.setLowValue(size);
    }
  }, []);

  return (
    <View style={styles.container}>
      <RangeSlider
        ref={slider}
        max={70}
        min={50}
        step={1}
        initialLowValue={size}
        value={size}
        onValueChanged={value => setSize({size: value})}
      />
    </View>
  );
};

function mapStateToProps(state: RootState) {
  return { size: state.sizeResult.size, };
}
const mapDispatchToProps = { setSize, };
export default connect(mapStateToProps, mapDispatchToProps)(Slider);

额外说明 #

• 你之前控制台能看到current里有方法，大概率是在组件挂载后（比如某个点击事件里）打印的，但组件第一次渲染时current还是初始的66，所以顶层的console.log会报错。
• 如果要调用组件实例方法（比如setLowValue），一定要确保在组件挂载完成后执行，比如放在useEffect或者用户交互事件（按钮点击）里。

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