如果我不滾動或單擊瀏覽器，組件內部的 React useState() 數組映射不會更新

Question

我用 React 和 Tailwind 制作了這個效果：

帶有效果的 GIF

如您所見，到目前為止，一切都很好。 但是，此效果僅在以下情況下有效：

• 我在瀏覽器上滾動
• 我點擊瀏覽器
• 我打開 Chrome 工具檢查器

當我不執行上述操作時，會發生這種情況：

具有效果但未按預期工作的 GIF

如您所見，這不是我要尋找的效果。

所以，顯然，這里發生了一個 React 渲染問題，我被困住了。

在內部，它的工作原理如下：

const HomeHeader = () => {

    // This are imported images
    const IMAGES = [insta, twitter, netflix, mix];

    // This is an array that maps inside the component and renders the images as JSX
    const [images, setImages] = useState([]);

    useEffect(() => {
        let counter = 0;
        
        // An interval that creates a new element in the array "images" every 50 miliseconds
        const interval = setInterval(() => {
            setImages(prevState => [
                ...prevState,
                {
                    id: counter++,
                    duration: getRandom(5, 9) * 1000,
                    image: IMAGES[getRandom(0, IMAGES.length)],
                    height: getRandom(1, 6),
                    top: getRandom(0, window.innerHeight - window.innerHeight / 4),
                    right: getRandom(0, window.innerWidth)
                }
            ]);
        }, 50);
        return () => clearInterval(interval);
    }, [])

    // Every time the state variable "images" is changed, add the cool animation to the last image and, when it ends, delete the image from the HTML
    useEffect(() => {
        if(images.length > 0) {
            let image = images[images.length - 1];
            let element = document.getElementById(image.id);
            element.classList.add('opacity-0');
            element.classList.add('scale-125');
            
            setTimeout(() => {
                element.parentNode.removeChild(element);
            }, image.duration);
        }
    }, [images])

    return (
        <div id="header" className="relative h-full bg-gray-900 flex justify-center items-center px-16 overflow-hidden">
        <h1 className="bg-black text-gray-200 font-bold text-5xl sm:text-8xl md:text-9xl text-center z-10"></h1>
        {
            images.map((element, index) => {
                return <img key={index} id={element.id} src={element.image} style={{top: element.top, right: element.right}} className={"imageRRSS absolute filter blur-sm w-auto h-" + element.height + "/6 w-auto transform transition-transform-opacity duration-" + element.duration}/>
            })
        }
    </div>
    )
}

它的作用是每 50 毫秒將一個新的 object 添加到包含要添加的圖像屬性的 state 數組圖像中。

每次添加后，由於它是一個 state 變量，React 重新渲染返回內部組件的映射：

        {
            images.map((element, index) => {
                return <img key={index} id={element.id} src={element.image} style={{top: element.top, right: element.right}} className={"imageRRSS absolute filter blur-sm w-auto h-" + element.height + "/6 w-auto transform transition-transform-opacity duration-" + element.duration}/>
            })
        }

它還進入 useEffect 並添加了很酷的 animation，當動畫結束時，它從 HTML 中刪除標簽：

useEffect(() => {
        if(images.length > 0) {
            let image = images[images.length - 1];
            let element = document.getElementById(image.id);
            element.classList.add('opacity-0');
            element.classList.add('scale-125');
            
            setTimeout(() => {
                element.parentNode.removeChild(element);
            }, image.duration);
        }
    }, [images])

但是，渲染只是在我與瀏覽器交互時發生。

這就是我理解正在發生的事情的方式。 但是，有些地方顯然是錯誤的，因為它沒有按預期工作。

有人知道發生了什么嗎？

謝謝！

Answer 1

好的，解決了。 問題在於 React 在元素中立即應用順風效果。 我只是將 onLoad 事件添加到組件中，而不是使用 useEffect 並且它運行良好。