Ошибка типа: ref.current не определен (useRef ())

Question

У меня есть изображение, и я хочу сохранить его размеры для размещения значков в зависимости от размеров. Я делаю это с помощью ловушки useRef ().

const componentRef=useRef()

Затем я добавляю это componentRef к <img ref={componentRef}>. Для отрисовки значков я вызываю функцию {setIcons}.

return(
  <div>
    <img ref={componentRef}/>
    {setIcons}
  </div>
)

Эта функция снова выглядит следующим образом.

const setIcons=(
        props.positions_Reader.map((mac,i)=>(
            <Icon
                style={{
                  position:"absolute",
                  left:componentRef.current.getBoundingClientRect().x,
                  top:componentRef.current.getBoundingClientRect().y
                }}
            />
        ))
    )

Ошибка возникает в этой строке left:componentRef.current.getBoundingClientRect().x

При первом рендере нет ошибки, но когда я go возвращаюсь и снова открываю компонент, эта ошибка возникает. Есть какие-нибудь предложения?

Answer 1

Проблема в том, что вы пытаетесь использовать componentRef до того, как оно будет назначено. Используйте useEffect и сохраняйте стили в состоянии, это обеспечит повторный рендеринг при componentRef.current изменениях

function App() {
  const componentRef = React.useRef();
  const [style, setStyle] = React.useState({})

  useEffect(() => {
    setStyle({
      left: componentRef.current.getBoundingClientRect().x,
      top: componentRef.current.getBoundingClientRect().y
    })
  }, [componentRef.current])

  const setIcons = props.positions_Reader.map((mac, i) => (
    <Icon
      style={{
        position: "absolute",
        top: style.top + mac.x,
        left: style.left + mac.y
      }}
    />
  ));

  return (
    <div>
      <img ref={componentRef} />
      {setIcons}
    </div>
  );
}

Sample Demo