I've written a piece of code in React and with mouse-click, I position a canvas element, I change 3 style property of the canvas element with mouse-click.
(我已经在React中编写了一段代码,然后单击鼠标,放置了画布元素,然后单击鼠标更改了画布元素的3个style属性。)
When the page refreshes I am getting this canvas elements position from the database and try to change it again according to data coming from the database however it doesnt change any property but if i try to change 1 property it changes, what might be causing this?(当页面刷新时,我正在从数据库获取此canvas元素的位置,并尝试根据来自数据库的数据再次对其进行更改,但是它不会更改任何属性,但是如果我尝试更改1个属性,它会更改,这可能是什么原因引起的?)
Here is the relevant part of my code:
(这是我的代码的相关部分:)
function click(e) {
if(upgrade_status){
if ( material[x_cord + "" + y_cord] == null) {
if(neededmat>totalmats){
//
}else{
setStyleProp('left', x_cord*90+30);
setStyleProp('top', y_cord*120+150);
setStyleProp('backgroundColor', "white");
}
}else{
if(mat ===source){
setStyleProp('left', x_cord*90+30);
setStyleProp('top', y_cord*120+150);
setStyleProp('backgroundColor', "white");
}
if(neededmat>totalmats){
//
}else{
//
}
}else{
//errormessage1
}
}
}else{
//errormessage2
}
}
function Economy() {
ref = useRef();
ref2 = useRef();
ref_yazi = useRef();
const kullanici =useTimes()
console.log("ka?kere")
setStyleProp = (prop, value) => {
setStyle({
...style,
[prop]: value
})
}
const [style, setStyle] = useState({
position: "absolute",
border: "0px solid red",
zIndex: "3",
width: "35px",
height: "25px",
backgroundColor:"transparent"
});
useInterval(() => {
setCount(count + 1);
}, 1000);
let [count, setCount] = useState(0);
update_details=kullanici.minebuildtime;
if ('undefined' !== typeof(update_details) && update_details !== "0") {
let d = new Date();
let currenttime = d.getTime();
timing_mat='';
timing_upgrade_value = '';
timing_mats_values = update_details.split("-");
[timing_cord_x,timing_cord_y,timing_mat,timing_upgrade_value,timing_time]= timing_mats_values;
let time_difference=timing_time-currenttime;
if(time_difference<0){
if(timing_upgrade_value ==="1"){
database.add(timing_cord_x,timing_cord_y,timing_mat,currentcordsandvalues,db,userUid,timing_time);
}else{
ctx.clearRect(timing_cord_x * 90, timing_cord_y * 120, 90, 120);
database.update(timing_cord_x,timing_cord_y,timing_mat,timing_upgrade_value,currentcordsandvalues,db,userUid,timing_time);
}
ctx_yazi.clearRect(timing_cord_x, timing_cord_y, 100, 30);
if(upgrade_status === false){
setStyleProp("backgroundColor", "transparent");
}
upgrade_status=true;
}else{
ctx_yazi.clearRect(timing_cord_x, timing_cord_y, 100, 30);
if(upgrade_status!==false){
//this is the part that doesnt work properly, only works if i use
//setStyleProp once
setStyleProp('position', 'absolute');
setStyleProp('backgroundColor', 'blue');
setStyleProp('left', timing_cord_x*90+30);
setStyleProp('top', timing_cord_y*120+150);
ctx_yazi.font = "14px Arial";
ctx_yazi.fillStyle = "black";
ctx_yazi.textAlign = "bottom";
}
ctx_yazi.fillText(Math.trunc(time_difference/1000), 5, 17);
upgrade_status=false;
}
}else{
upgrade_status=true;
}
return (
<>
{user ? (
<div className="screens">
<canvas
ref={ref2}
className="buildings"
width={800}
height={120}
onClick={e => {
}}
/>
<canvas
ref={ref}
className="gameScreen"
width={800}
height={600}
onClick={e => {
}}
/>
<canvas
ref={ref_yazi}
style={style}
width={30}
height={25}
/>
</div>
) : (<div>Please login</div>)}
</>
);
}
ask by Faruk translate from so