reactjs - react component load 5 times 'undefined' then it finds the inner html div

Question

emphasized text

import React, { useState, useEffect,useRef } from "react";
import Axios from "./axios.js";


//ADblockerdetection
export  function Adblockerdetection() {
    const [firstname, setfirstname] = useState('');

    const [adblock, adblocdetected] = useState(false);

 Axios.get("/user").then((result) => {
       setfirstname(
       result.data.firstname
           );
         }); 

    useEffect(() => {
        return Adblockerdetection();
    });
  
 
    function Adblockerdetection() {
        const head = document.getElementsByTagName("head")[0];

        const noadblock = () => {
            adblocdetected(false);
        };

        const adblocker = () => {
            adblocdetected(true);
        };

        const script = document.createElement("script");
        script.id = "adblock-detection";
        script.type = "text/javascript";
        script.src = "./public/gpt.js";
        script.onload = noadblock;
        script.onerror = adblocker;
        head.appendChild(script);

        //this.adblocdetected() = this.adblocdetected().bind(this);
    }
    return (
        <div>
           
            <div className="AdblockerMessage">
                {adblock ? (<div className="modal1">
                    <div id="adblock_message" >
                        <h2>HELLO {firstname}</h2>
                        <p>it looks like you are using an Adblocker. <br/>Please disable
                        the adblocker for this page!</p>
                        <button
                            onClick={() => {
                                Adblockerdetection( window.location.reload(true));
                            }}
                        >
                          
                        try to proof of Adblocker
                        </button>
                    </div>
                    </div>
                ) : (
                   null
                )}
           
            </div>
        </div>
    );
}


export default function Adinjection(props) {
    const { adtype, zoneid, id, name } = props;
        var therealURL =
        "https://marcpassenheim.net/AdServerTest/www/delivery/afr.php?";
    var theRandom = Math.floor(Math.random() * 1000000 + 1);
    var urlparam = {
        zoneid: zoneid,
        cb: theRandom,
    };
    var theURL = Object.keys(urlparam)
        .map((key) => key + "=" + urlparam[key])
        .join("&");
    //the adurl
    var construUrl = therealURL + theURL;
//------USEstat--------------------------------------------


//----------------------------------------

    const ads = {
        bigsky: {
            id: id,
            name: name,
            src: construUrl,
            width: "160" + "px",
            height: "600" + "px",
        },
        sky: {
            id: id,
            name: name,
            src: construUrl,
            width: "120" + "px",
            height: "600" + "px",
        },

        billboard: {
            id: id,
            name: name,
            src: construUrl,
            width: "800" + "px",
            height: "250" + "px",
        },
        bigbillboard: {
            id: id,
            name: name,
            src: construUrl,
            width: "970" + "px",
            height: "250" + "px",
        },
        mediumrectangle: {
            id: id,
            name: name,
            src: construUrl,
            width: "300" + "px",
            height: "250" + "px",
        },
        hpa: {
            id: id,
            name: name,
            src: construUrl,
            width: "300" + "px",
            height: "600" + "px",
        },
    };
    //Component where the ADTYPE prop is overgiven
    const currentAd = ads[adtype];

 //----------------HIDETheSpots-------------------------
const [visible, setAdSpotvisible] = useState(false);

 useEffect( () => {
  
      return setAdSpotvisible(true);
 }, []);

//setthecomponent to display:none when its not loaded
const divStyleNone = {
 display: "none !important",
 height:0+'px !important',
 width:0+'px !important'
};
const divstyleBlock = {
 display: "block",
 background: "yellow",
 height:'auto',
 width:'auto'
 
};



const [iframe,stateiframe] =useState(<iframe/>)
const containerToProof = useRef()

const isEmpty = containerToProof.current;
if(isEmpty==='undefined'){
       console.log('allo')
}
useEffect(()=>{
    console.log('saysomething',isEmpty)   
    },[<iframe/>]);


    return (
        <div>
           <div  ref={containerToProof}  >

               {visible ? (<div style={divstyleBlock}>
                            <iframe
                                id={currentAd.id}
                                name={currentAd.name}
                                src={currentAd.src}
                                frameBorder="no"
                                scrolling="no"
                                width={currentAd.width}
                                height={currentAd.height}
                                allow="autoplay"
                               
                                
                            />
                        </div>):( <div style={divStyleNone}> </div>)
              
              
              
               }
        </div>
        </div>
    );







    
}

hi im trying to to proof the response of an adserver. To check which typeof response it is im using useRef() and the reference on the div where the iframe will be constructed and send the get request to the adserverhttps://i.stack.imgur.com/3kvMo.png

the ads object looks like :

https://i.stack.imgur.com/fe3aL.png

everytime im refresh the page the console.log statement 'saysomething' gives me 5 times an undefined and then it finds the divs. https://i.stack.imgur.com/2V5bX.png

5adinjection.js:171 saysomething undefined
adinjection.js:171 saysomething <div>​…​&lt;/div>​
adinjection.js:171 saysomething <div>​…​&lt;/div>​
adinjection.js:171 saysomething <div>​…​&lt;/div>​
adinjection.js:171 saysomething <div>​…​&lt;/div>​
adinjection.js:171 saysomething <div>​…​&lt;/div>​
adinjection.js:171 saysomething <div>​…​&lt;/div>​
adinjection.js:171 saysomething <div>​…​&lt;/div>​
adinjection.js:171 saysomething <div>​…​&lt;/div>​
adinjection.js:171 saysomething <div>​…​&lt;/div>​
adinjection.js:171 saysomething <div>​…​&lt;/div>​

The problem is i need the innerHTML Value immediately to work with the stored value otherwise, when im trying to go on in an if statement or something different the console say 'can't find value of undefined blah blah....' Did i missed something im stuck here for hour s and need help.

标签： reactjsinnerhtmladvertisement-serveruse-ref

Answer 1

似乎您必须Adblockerdetection()在第一次安装后运行。为此，您需要将空数组传递给useEffect依赖项。异步函数也应该在 useEffect 中。

    useEffect(() => {
       Axios.get("/user").then(result => {
          setfirstname(result.data.firstname);
       });
       return Adblockerdetection();
     }, []);

您也得到了，undefined因为 的值containerToProof.current仅分配给isEmpty变量一次。所以不要对inside进行console.log('saysomething',isEmpty)更改。console.log('saysomething',containerToProof.current)useEffect

useEffect(()=>{
    console.log('saysomething',containerToProof.current)   
 },[<iframe/>]);

检查是否加载了 iframe

<div ref={containerToProof}>
          {visible ? (
            <div style={divstyleBlock}>
              <iframe
                id={currentAd.id}
                name={currentAd.name}
                src={currentAd.src}
                frameBorder="no"
                scrolling="no"
                width={currentAd.width}
                height={currentAd.height}
                allow="autoplay"
                onLoad={() => {
                  // iframe is loaded now and here you can call the function
                }}
              />
            </div>
          ) : (
            <div style={divStyleNone}> </div>
          )}
        </div>