Issue
I'm making a Cookie-type clicker. But I ran into such a problem that the pop-up element simply does not appear. Here is the code:
Caravan.tsx
interface CaravanProps{
x: number;
y:number;
}
function randomNumberBetween(min: number, max: number): number {
return Math.random() * (max - min) + min;
}
export let CaravanGen = () => {
let caravanList: Array<JSX.Element> = new Array<JSX.Element>();
const[carList, setCarList] = useState(caravanList);
useEffect(() => {
let timer = randomNumberBetween(3000, 6000);
let newCarList = carList;
const interval = setInterval(() => {
const x = randomNumberBetween(0, 1900);
const y = randomNumberBetween(0, 1000);
newCarList.push(<Caravan x={x} y={y}/>);
setCarList(newCarList);
console.log(x, y);
}, timer);
return () => {
clearInterval(interval);
};
}, []);
return(<div className='caravan-gen'>{caravanList}</div>);
}
export function Caravan(props: CaravanProps) {
return(
<div style={{
position: 'absolute',
left: props.x,
top: props.y,
width: "100px",
height: "100px",
borderRadius: "100%",
backgroundColor: "black"
}}>
</div>
);
}
index.css
.caravan-pop{
width: 100px;
height: 100px;
border-radius: 100%;
background-color: black;
z-index: 10;
}
In Coockie Clicker A golden cookie appears in it at random intervals, which gives some bonuses. I want to implement the same thing so that my element appears in a random place on the screen and when I click on it, something will happen.
Solution
Fixed it.
The problem was that when changing the array with JSX elements, the page was not updated. I have been studying React for no more than 3 months and my ignorance of working with webhooks affected here. To fix it, I left carList
and setCarList
. In the interval recorded a webhook:
setCarList(сarList => [
...сarList,
<Caravan key={сarList.length} x={x} y={y} />
]);
Here is the corrected code.
import React, { useEffect, useRef, useState } from 'react';
interface CaravanProps{
x?: number;
y?:number;
}
function randomNumberBetween(min: number, max: number): number {
return Math.random() * (max - min) + min;
}
export let CaravanGen = () => {
const[carList, setCarList] = useState([] as Array<JSX.Element>);
useEffect(() => {
let timer = randomNumberBetween(3000, 6000);
const interval = setInterval(() => {
const x = Math.round(randomNumberBetween(0, 1900));
const y = Math.round(randomNumberBetween(0, 1000));
setCarList(сarList => [
...сarList,
<Caravan key={сarList.length} x={x} y={y} />
]);
console.log(carList);
}, timer);
return () => {
clearInterval(interval);
};
}, [carList]);
return(<div key={2} className='caravan-gen'>{carList}</div>);
}
export function Caravan(props: CaravanProps) {
return(
<div style={{
zIndex:10,
position: 'absolute',
left: `${props.x}px`,
top: `${props.y}px`,
width: "100px",
height: "100px",
borderRadius: "55%",
backgroundColor: "black"
}}>
</div>
);
}
And a screenshot of the result I needed. See screenshot
Answered By - Okneas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.