为什么我的呼叫映射函数隐藏在计数节点中，但在返回输出中可见？

Question

这将是一个复杂的示例，因为我的代码很多……

所以基本上我只是直接指出我的观点。我的问题是，当我尝试获取所有项目的document.queryselectorall（）时，我不知道为什么我的列表映射功能不包括返回的输出功能。基本上是这样的。

            <div className='gallery' style={ ispost ? { display:'none' } : {display:"block"}}>
                {mainList.map((elem,idx) => {
                    return (
                        <div className="gallery-container" key={idx}>
                            <div className="l">
                                <div className="l-box">
                                    <div className="text">
                                        <div className="hide">
                                            <h2> Onigsahima Tokyo </h2>
                                        </div>
                                    </div>
                                    <div className="hide">
                                        <div className="color-sample">
                                            <img src={g3} alt="" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="r">
                                <div className="r-box">
                                    <div className="hide">
                                        <div className="color-sample">
                                            <img src={g3} alt="" />
                                        </div>
                                    </div>
                                </div>
                                <div className="r-box">
                                    <div className="hide">
                                        <div className="color-sample">
                                            <img src={g3} alt="" />
                                        </div>
                                    </div>
                                </div>
                                <div className="r-box">
                                    <div className="hide">
                                        <div className="color-sample">
                                            <img src={g3} alt="" />
                                        </div>
                                    </div>
                                </div>
                                <div className="r-box">
                                    <div className="hide">
                                        <div className="color-sample">
                                            <img src={g3} alt="" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    )
                })}
                <div className="gallery-container" style={ ispost ? { display:'none' } : {display:"inline-grid"}}>
                    <div className="l">
                        <div className="l-box">
                            <div className="text">
                                <div className="hide">
                                    <h2> Onigsahima Tokyo </h2>
                                </div>
                            </div>
                            <div className="hide">
                                <div className="color-sample">
                                    <img src={g3} alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="r">
                        <div className="r-box">
                            <div className="hide">
                                <div className="color-sample">
                                    <img src={g3} alt="" />
                                </div>
                            </div>
                        </div>
                        <div className="r-box">
                            <div className="hide">
                                <div className="color-sample">
                                    <img src={g3} alt="" />
                                </div>
                            </div>
                        </div>
                        <div className="r-box">
                            <div className="hide">
                                <div className="color-sample">
                                    <img src={g3} alt="" />
                                </div>
                            </div>
                        </div>
                        <div className="r-box">
                            <div className="hide">
                                <div className="color-sample">
                                    <img src={g3} alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
             </div>

然后我有一个useeffect（），我将显示有关它的所有代码。但是，不要对它感到困惑，只需集中于queryselectorall（）原因>原因>这是影响它所有动画的唯一一件事，

    useEffect(() => {

        gsap.registerPlugin(ScrollTrigger,CSSRulePlugin)
        // gsap.registerPlugin(CSSRulePlugin)
        const sections_ = document.querySelectorAll('.gallery-container')
        console.log(sections_)
        let sections = gsap.utils.toArray(".gallery-container")
        console.log(sections)
        let scrollTween = gsap.to(sections, {
            xPercent: -100 * (sections.length - 1),
            ease: "none", // <-- IMPORTANT!
            scrollTrigger: {
                trigger: ".gallery",
                pin: true,
                scrub: 3,
                end: "+=3000",
                // markers:true
            }
        });

        
        gsap.to(".gallery-container:nth-child(1) .color-sample",{
            y:0,
            ease:"none",
            scrollTrigger:{
                trigger:".gallery-container:nth-child(1)",
                containerAnimation:scrollTween,
                start:"0% 0%",
                end:"10% 6%",
                // markers:{startColor: "orange", endColor: "green"},
                scrub:2,
            }
        })
        const rule = CSSRulePlugin.getRule(`.r-box:after`)
        const rule2 = CSSRulePlugin.getRule(`.r-box:before`)
        gsap.to([rule,rule2],{
            width:'35%',
            height:'35%',
            background:"yellow",
            delay:3,
            ease:"none",
            scrollTrigger:{
                trigger:`.gallery-container:nth-child(1)`,
                containerAnimation:scrollTween,
                start:"0% 0%",
                end:"10% 6%",
                // markers:true,
                scrub:2,
            }
        })

        gsap.to(`.gallery-container:nth-child(1) .text h2`,{
            y:0,
            // delay:2,
            ease:"none",
            scrollTrigger:{
                trigger:`.gallery-container:nth-child(1)`,
                containerAnimation:scrollTween,
                start:"0% 0%",
                end:"10% 6%",
                // markers:true,
                scrub:2,
            }
        })

        sections.forEach((elem,i) => {
            gsap.to(`.gallery-container:nth-child(${i+2}) .color-sample`,{
                y:0,
                ease:"none",
                scrollTrigger:{
                    trigger:`.gallery-container:nth-child(${i+2})`,
                    containerAnimation:scrollTween,
                    start:"center 50%",
                    end:"center 60%",
                    // markers:true,
                    scrub:2,
                }
            })

            gsap.to(`.gallery-container:nth-child(${i+2}) .text h2`,{
                y:0,
                // delay:2,
                ease:"none",
                scrollTrigger:{
                    trigger:`.gallery-container:nth-child(${i+2})`,
                    containerAnimation:scrollTween,
                    start:"center 50%",
                    end:"center 60%",
                    // markers:true,
                    scrub:2,
                }
            })

            const rule = CSSRulePlugin.getRule(`.r-box:after`)
            const rule2 = CSSRulePlugin.getRule(`.r-box:before`)
            gsap.to([rule,rule2],{
                width:'35%',
                height:'35%',
                background:"yellow",
                delay:3,
                ease:"none",
                scrollTrigger:{
                    trigger:`.gallery-container:nth-child(${i+2})`,
                    containerAnimation:scrollTween,
                    start:"center 50%",
                    end:"center 60%",
                    // markers:true,
                    scrub:2,
                }
            })

        })


        const arrowsColor = document.querySelectorAll('.arrow.first ion-icon')
        const arrows2Color = document.querySelectorAll('.arrow.second ion-icon')

        var scrollPos = 0 
        window.addEventListener('scroll',() => { 
            if ((document.body.getBoundingClientRect()).top > scrollPos) {
                // console.log('Right')
                arrowsColor.forEach(elem => {
                    elem.style.color = 'black'
                })
                arrows2Color.forEach(elem => {
                    elem.style.color = 'yellow'
                })
            } else {
                // console.log('Left')
                arrowsColor.forEach(elem => {
                    elem.style.color = 'yellow'
                })
                arrows2Color.forEach(elem => {
                    elem.style.color = 'black'
                })
            }
            scrollPos = (document.body.getBoundingClientRect()).top
        })

    },[])

我不知道这是否是最简单的解释方法，但这是我能做的最好的。 请注意，主列表是usestate，所以我在代码中有类似的东西 当我在setMainlist中推动项目时，

    useEffect(() => {
        axios.get('http://localhost:7777/gallery')
        .then(res => {
                let del = []
                res.data.map((elem,i) => {
                    console.log(i)
                    setMainList([...mainList,elem]) 
                })
            })
    },[])

它有效，但为什么document.clearselectorall不检测我是否有一个我在该Mainlist列表中弹出的新元素.map函数？我不明白为什么..这不应该是这种方式。我总是这样做，但永远不会遇到这个错误。 请注意，mainlist.map（）是可见的，但在该queryselectorlall中不包括 请急需它来完成此操作。

Answer 1

因为您的useffect回调仅运行一次，因为您没有添加任何依赖项。如果您希望每当Mainlist更改时调用回调，请将Main Code>添加到useffect useffect依赖项列表中，

useEffect(() => {
  //...
}, [mainList])

请小心！您应该使用返回回调来删除已设置的所有侦听器或订阅。

useEffect(() => {
  //...
  
  function onScroll() {
    //...
  }
  window.addEventListener('scroll', onScroll)

  return () => {
    // remove listeners
    window.removeEventListener('scroll', onScroll)
  }
}, [mainList])

我不知道gsap有效，但是您可能还需要“放下拆下回调中的插件”，或者只是使用其他useffect noone 呼叫依赖项仅注册一次 - 您可能仍然想“删除”它，但是您不会每次Mainlist更改。

编辑：我强烈建议您阅读使用efffect docs

edit2： “ https://gist.github.com/monojack/monojack/ab0c50338ea0a6765467907fe65e7f70” rel =“ nofollow noreferrer”> gist