Реагирует "useRef": нет доступа к методу в .current - PullRequest
Новая
       7

Реагирует "useRef": нет доступа к методу в .current

1 голос
/ 30 марта 2020

Итак, в моем приложении React Native я хочу интегрировать этот слайдер, следуя указаниям здесь .

Проблема в том, что я хочу получить доступ к методу setLowValue() свойства .current useRef(), как указано в конце на сайте руководства . Я напечатал .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);

Помощь будет высоко ценится!

Ответы [ 3 ]

3 голосов
/ 30 марта 2020

Значения ref сначала устанавливаются в состояниях жизненных циклов 'componentDidMount' и 'componentDidUpdate', которые оба происходят после первого рендеринга.

Причина, по которой ведение журнала может вызвать путаницу, состоит в том, что журналы могут / будут происходить одновременно. при первом рендеринге (до componentDidMount, с исходным ref.current) и после (с правильно определенным ref.current, установленным через компонент ref'd).

Решение здесь заключается в доступе к ref после того, как компонент был смонтирован, что может быть достигнуто с помощью крюка useEffect.

См .: https://reactjs.org/docs/refs-and-the-dom.html

tldr: 

useEffect(() => {
  console.log(slider.current.initialLowValue);
}, [])
1 голос
/ 30 марта 2020

Я бы предложил установить начальную ссылку на 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>
  );
};
0 голосов
/ 30 марта 2020

Попробуйте это 

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