Блог

У меня есть следующий вызов useEffect в React:

 const containerRef = useRef(null);

useEffect(() => {
    function handleResize() {
        const {offsetWidth} = containerRef.current;
        setWidth(offsetWidth);
        console.log(width);
    }
    handleResize();
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
}, [containerRef, width]);
 

Что я пытаюсь сделать, так это получить ширину div, которая оборачивает диаграмму победы, и передать ее на диаграмму, чтобы она могла регулировать соотношение сторон, чтобы включить гибкую ширину с фиксированной высотой:

 <div ref={containerRef}>
                            <VictoryChart theme={DataVizTheme} width={width} height={250} containerComponent={<VictoryContainer responsive={false} />}>
                                <VictoryAxis
                                    tickValues={[1, 2, 3, 4, 5, 6, 7]}
                                    tickFormat={["Mon 7", "Tue 8", "Wed 9", "Thu 10", "Fri 11", "Sat 12", "Sun 13"]}
                                />
                                <VictoryAxis
                                    dependentAxis
                                />
                                <VictoryStack>
                                    <VictoryArea interpolation="cardinal" padding="0" data={data} />
                                </VictoryStack>
                            </VictoryChart>
                        </div>
 

По какой-то причине «ширина» из блока useEffect обновляется только при увеличении размера окна. Когда оно уменьшается, ширина остается прежней.

Я делаю что-то не так?

Большое спасибо!

Потратив больше времени на оценку своей настройки, я понял, что проблема была на уровне, а не в блоке useEffect. Добавление минимальной ширины 100% к div привело к обновлению его ширины при уменьшении.