为什么我的调用映射函数隐藏在计数节点列表中，但在 return 输出中可见？

Question

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

所以基本上我只是直截了当。我的问题是，当我试图获取所有项目的 document.querySelectorAll() 时，我不知道为什么我的列表映射函数不包含 return 的输出函数。基本上是这样的。

            <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
        })

    },[])

我不知道这是否是最简单的解释方式，但这是我能做的最好的.. 注意 mainList 是一个 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.querySelectorAll 没有检测到我在那个 mainList.map 函数中是否弹出了一个新元素？我不明白为什么..不应该是这种方式。我总是这样做，但从来没有遇到过这个错误.. 请注意，mainList.map() 就像是可见的，但它不包含在 querySelectorlAll 中请帮助急需它来完成这件事。

Answer 1

因为您的 useEffect 回调只运行一次，因为您没有添加任何依赖项。如果您希望在 mainList 更改时调用回调，请将 mainList 添加到 useEffect 依赖列表，如

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

不过要小心！您应该使用 return 回调来删除您设置的任何侦听器或订阅。

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

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

我不知道 gsap 是如何工作的，但您可能还想在 tear-down 回调中“注销”插件，或者只是使用不同的 useEffect 回调没有依赖关系只注册一次 - 你可能仍然想以任何一种方式“注销”它，但你不会每次 mainList 更改时都这样做。

编辑：强烈建议您阅读 useEffect docs

Edit2：这是 gist

为什么我的调用映射函数隐藏在计数节点列表中，但在 return 输出中可见？

Why my call map function is hide in the count nodeList but it is visible in return output?

javascript

arrays

reactjs

axios

use-effect