Почему «детализация» моего состояния всегда пуста, когда я пытаюсь очистить ее только при модальном закрытии? [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь создать некоторую логику для динамического создания карусели, если часть имеет более одного отображаемого изображения (детали показывают, что это так). Однако, хотя настройка детализации работает, если я попытаюсь сбросить ее при модальном закрытии, состояние будет постоянно пустым. Это может быть тривиально, возможно, потому, что я не совсем правильно понимаю useEffect, но, тем не менее, помощь будет оценена по достоинству.
Вот мой текущий блок:

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

const gridData = usePopulateGrid();

const [isModalOpen, setIsModalOpen] = useState(false);
const [focusItem, setFocusItem] = useState(null);
const [detail, setDetail] = useState([]);
const modalRef = useRef();

//

useEffect(() => {
if (isModalOpen){
if (focusItem.hasDetail){
setDetail(focusItem.detailPicture.split(";"));
console.log("this part does: " + detail);
}
}
},[isModalOpen])

const handleOpen = (item) => {
setIsModalOpen(true);
setFocusItem(item);

};

const handleClose = () => {
setIsModalOpen(false);
setFocusItem(null);
setDetail([]);

};

useEffect(() => {
function handleClickOutside(event) {
if (
modalRef.current &&
!modalRef.current.contains(event.target) &&
modalRef.current.id == "open"
) {
handleClose();

}
}

document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);

Я также пробовал переместить вызов «setDetail([])» в функцию handleClickOutside, хотя, насколько я понимаю, он в любом случае дает тот же результат, что и handleClose внутри нее.
п>

Подробнее здесь: https://stackoverflow.com/questions/783 ... modal-clos