Я хочу динамически установить состояние смещений, но почему Console.log продолжает печатать NULL? ⇐ CSS

[Anonymous]

Код: Выделить всё

import { createRef, useEffect, useRef, useState } from 'react';
import Section from './Section';
import QuestionAnswer from './QuestionAnswer';

export default function FAQ(){
let [offsets, setOffsets] = useState({offset_width: null, offset_height: null});
let gridColRef = createRef();
let gridCol = useRef(gridColRef);

// we use useEffect as a didComponentMount, and didComponentUpdate
// as the dom won't be loaded initially and thus won't give us access
// to the gridCol element
useEffect(() => {
// everytime we resize the window unfortunately this addEventListener
// and all its statements run and
window.addEventListener("resize", () => {
console.log(offsets.offset_height, offsets.offset_width);
if(gridCol.current){
// console.log(gridCol.current.current)
let gridColWidth = gridCol.current.current.offsetWidth;
let gridColHeight = gridCol.current.current.offsetHeight;
setOffsets({offset_width: gridColWidth, offset_height: gridColHeight});
}
});

}, []);

return (

Frequently asked questions






}
< /code>
Это мой код React, и в основном я хочу, чтобы в конечном итоге было установлено, что состояние смещения, содержащее высоту и ширину, когда компонент устанавливается и обновления на основе изменения размера окна. Например. Если монги компонента получают начальную offsetwidth 

и offsetheight указанного элемента и используйте его для установки состояния смещений , тогда, когда окно изменяется, получите offsetwidth и offsetheight < /code> снова указанный элемент для установки смещений state

Подробнее здесь: https://stackoverflow.com/questions/794 ... le-log-kee