Не удается получить обновленное значение состояния useState и UseEffect

Question

Я хочу получить последнее значение состояния и использовать его встраиваемый стиль, но сначала он возвращает 0 значений, а затем рендеринг обновляет состояние. Однако я не могу присвоить значения стилю.

const ImageCard = ({ image: { alt_description, urls } }) => {
  const [spans, setSpans] = useState(0);
  const imageRef = useRef(null);

  useEffect(() => imageRef.current.addEventListener('load', () => {
    const height = imageRef.current.clientHeight;
    const spans = Math.ceil(height / 10);
    setSpans({ spans });
  }));

  return (
    <div style={{ gridRowEnd: `span ${spans}` }}>
      <img ref={imageRef} alt={alt_description} src={urls.regular} />
    </div>
  );
}

вывод консоли:

10 0
{spans: 15}
{spans: 33}
...

Answer 1

Для этого useEffect вам не понадобится. Вы можете использовать событие onLoad тега img следующим образом:

const ImageCard = ({ image: { alt_description, urls } }) => {
  const [spans, setSpans] = useState(0);

  const imageLoaded = e => {
    const height = e.currentTarget.clientHeight;
    const spans = Math.ceil(height / 10);
    setSpans({ spans });
  };
  //Dont forget to remove this line
  console.log(spans);
  return (
    <div style={{ gridRowEnd: `span ${spans}` }}>
      <img onLoad={imageLoaded} alt={alt_description} src={urls.regular} />
    </div>
  );
};

Пример песочницы рабочего кода