React "useRef"：无法访问 .current 中的方法

Question

所以在我的 React Native 应用程序中，我想集成 this slider, following the guidance here。

问题是，我想访问 useRef() 的 .current 属性的方法 setLowValue()，正如在 [=18] 末尾指定的=].我将 .current 打印到控制台并看到 setLowValue() 被指定为一个函数，所以它肯定存在。为什么我不能访问它？

这是我的代码：

imports ... 

type Props = {
  size: number;
  setSize: (size: SizeState) => void;
};

const Slider: React.FC<Props> = ({size, setSize}) => {

  const slider = useRef(66); // set slider to inital value
  console.log('slider ', slider.current.initialLowValue); // doesn't work: "slider.current.initialLowValue is not a function"

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

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

const mapDispatchToProps = {
  setSize,
};

export default connect(mapStateToProps, mapDispatchToProps)(Slider);

非常感谢您的帮助！

Answer 1

试试这个

 <RangeSlider
      ref={(input) => { this.slider = input; }}
    .......
/>

Answer 2

ref 值首先在 'componentDidMount' 和 'componentDidUpdate' 生命周期状态上设置，这两个状态都发生在第一次渲染之后。

日志记录可能导致混淆的原因是因为日志 can/will 出现在第一次渲染（在 componentDidMount 之前，初始 ref.current）和之后（正确定义 ref.current, 通过 ref'd 组件设置).

这里的解决方法是在组件挂载后访问ref，可以通过useEffect hook来实现。

参见：https://reactjs.org/docs/refs-and-the-dom.html

tldr:

useEffect(() => {
  console.log(slider.current.initialLowValue);
}, [])

Answer 3

我建议将初始参考设置为 null:

const Slider: React.FC<Props> = ({size, setSize}) => {

  const slider = useRef(null);

  console.log('slider ', slider.current); // null

  useEffect(() => {
    if (slider.current) {
      console.log('slider ', slider.current.initialLowValue); // size
    }
  }, []);

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

React "useRef"：无法访问 .current 中的方法

React "useRef": no access to method in .current

reactjs

react-native

react-hooks

use-ref