reactjs - react "useRef": no access to method in . 当前

Question

所以在我的 React Native 应用程序中，我想集成 this slider ，遵循指导here .

问题是，我想按照指定访问 useRef() 的 .current 属性的方法 setLowValue()相当结束the guidance website .我将 .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

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

日志记录可能会引起混淆的原因是因为日志可以/将会出现在第一次渲染(在 componentDidMount 之前，使用初始 ref.current)和之后(使用正确定义的 ref.current，通过 ref'd 设置)组件)。

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

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

长话短说:

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