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

Question

因此，在我的React Native应用程序中，我想按照这里的指导集成这个滑块。

问题是，我想访问useRef()的.current属性的方法setLowValue()，正如指导网站末尾所指定的那样。我把.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"one_answers"componentDidUpdate"生命周期状态上，这两个状态都发生在第一次渲染之后。

日志记录可能导致混乱的原因是，日志可以/将在第一次渲染(componentDidMount之前，初始ref.current(和之后(通过ref组件设置正确定义的ref.current(发生。

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

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

tldr:

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

Answer 2

我建议将初始ref设置为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>
);
};

Answer 3

试试这个

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