使用react component/random number中的useState随机更改两个div的状态

Question

我有两个div，在同一个组件的同一个位置上有广告。它们都有一个名为decesionmaker1和decesionmaker2的道具。

<div className="billboard">
    <Adinjection
        adtype="billboard"
        configobject={Siteconfig.userfinder.billboard}
        decisionmaker2={true}
    />
</div>

<div className="bigbillboard">
    <Adinjection
        adtype="bigbillboard"
        configobject={Siteconfig.userfinder.bigbillboard}
        decisionmaker1={true}
    />
</div>

两个道具都是true（decesionmaker2={true}）。我把这个道具交给了“控制组件”。然后我有一个下面的使用状态

const [ showbillboard, setshowbillboard ] = useState(false);

使用这个useState和一个随机数，我将其存储在一个变量中

const thesecrandom = Math.floor(Math.random() * 10 + 1);

我试图根据randomnumber的值，在其中一个div上随机设置状态以随机显示它们：useeffect看起来：

useEffect(() => {
    console.log("thesecrandom", thesecrandom);
    if (thesecrandom > 5) {
        if (decisionmaker1) {
            setshowbillboard(true);
            setAdSpotvisible(true);
        } else if (thesecrandom < 5) {
            if (decisionmaker2) {
                setshowbillboard(true);
                setAdSpotvisible(true);
            } else {
                setshowbillboard(true);
            }
        }
    } else {
        setshowbillboard(true);
    }

    if (scrollactiv) {
        window.onscroll = () => {
            //setOffset(window.pageYOffset)
            if (window.pageYOffset > 1200) {
                setAdSpotvisible(true);
                setshowbecause(true);
            } else {
                setAdSpotvisible(true);
                setshowbecause(false);
            }
        };
    } else {
        setshowbecause(true);
    }
}, []);

返回语句看起来：

return (
    <div>
        {visible && showbecause && showbillboard ? (
            <div style={divstyleBlock}>
                <iframe
                    id={configobject.id}
                    name={configobject.name}
                    src={currentAd.src}
                    frameBorder="no"
                    scrolling="no"
                    width={configobject.width}
                    height={configobject.height}
                    allow="autoplay"
                    ref={(el) => (myRef.current = el)}
                    onLoad={(onload) => {
                        // console.log("the frame is loaded ");
                        setAdSpotvisible(true);
                    }}
                    onError={(onerror) => {
                        // console.log("my fram is not  loaded ");
                        setAdSpotvisible(false);
                        head1a.appendChild(Pixelscript);
                    }}
                />
            </div>
        ) : (
            <div style={divStyleNone} ref={(el) => (mySecREf.current = el)} />
        )}

        <Adblockerdetection />
    </div>
);

使用此代码，组件上其他每个广告的显示状态也会随机显示。我在decisionmaker1 decisionmaker2和decisionmaker2上尝试了几个小时的if语句的其他组合，但我找不到解决方案。有人能帮我吗？

Answer 1

我想展示其中一个。

那么您不应该在组件本身内部管理它。尤其是当你只在那个地方需要这个的时候

const bigbillboard = React.useMemo(() => Math.random() < 0.5, []);

{ bigbillboard ? (
    <div className="bigbillboard">
        <Adinjection 
            adtype="bigbillboard" 
            configobject={Siteconfig.userfinder.bigbillboard} 
        />
    </div>
) : (
    <div className="billboard">
        <Adinjection 
            adtype="billboard" 
            configobject={Siteconfig.userfinder.billboard} 
        />
    </div>
) }

和关于window.onscroll

onscroll工作正常，没有什么可定制的。

标记的下一个实例可能会覆盖滚动处理程序。或者你在另一个（完全不相关的）组件中以同样的方式实现另一个滚动处理程序，它会覆盖这个，现在继续调试它。最好这样写：

useEffect(() => {
    if (!scrollactiv) {
        setshowbecause(true);
        return;
    }

    const handler = () => {
        //setOffset(window.pageYOffset)
        if (window.pageYOffset > 1200) {
            setAdSpotvisible(true);
            setshowbecause(true);
        } else {
            setAdSpotvisible(true);
            setshowbecause(false);
        }
    };

    addEventListener("scroll", handler);

    // And remove your event-listener when they are no longer needed;
    // or the component unmounts.
    // That's something you didn't do either.
    return () => {
        removeEventListener("scroll", handler);
    };
}, [scrollactiv]);