Ich möchte den Zustand der Offsets dynamisch festlegen, aber warum druckt Console.log weiter null? ⇐ CSS

[Guest]

Code: Select all

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>
Dies ist mein React -Code, und im Grunde möchte ich schließlich den Offsets -Status mit Höhe und Breite dynamisch einstellen lassen, wenn die Komponenten basierend auf der Größenänderung des Fensters montiert und aktualisiert werden. Z.B. Wenn die Komponentenhalterungen die anfängliche Offsetwidth 

und offseteight des referenzierten Elements abrufen und die Offsets Status festlegen, erhalten Sie, wenn das Fenster die Offsetwidth und Offseteight