реагировать на загрузку компонента 5 раз undefined, затем он находит внутренний html div
Выделенный текст
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>
);
}привет я пытаюсь проверить ответ рекламного сервера. Чтобы проверить, какой это тип ответа, я использую useRef() и ссылку на div, где будет создан iframe, и отправляем запрос на получение на сервер объявлений
объект рекламы выглядит так:
Каждый раз, когда я обновляю страницу, оператор console.log говорит, что что-то дает мне 5 раз undefined, а затем находит div. 
5adinjection.js:171 saysomething undefined
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
adinjection.js:171 saysomething <div>…</div>
Проблема в том, что мне нужно значение innerHTML немедленно, чтобы работать с сохраненным значением, в противном случае, когда я пытаюсь продолжить оператор if или что-то другое, консоль говорит: "Не могу найти значение undefined бла-бла..." пропустил что-то, что я застрял здесь на час, и мне нужна помощь.
1 ответ
Похоже, тебе нужно бежать Adblockerdetection()только после первого крепления. Для этого вам нужно передать пустой массив вuseEffectзависимость. Также внутри useEffect должны быть асинхронные функции.
useEffect(() => {
Axios.get("/user").then(result => {
setfirstname(result.data.firstname);
});
return Adblockerdetection();
}, []);
Также вы получаете undefined потому что ценность containerToProof.current назначается только один раз isEmptyпеременная. Поэтому вместо того, чтобы делать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>