Почему мой сохраненный этикетка сбрасывается каждый раз, когда я возвращаюсь с нового холста? ⇐ Javascript

[Anonymous]

Так что я использую холст в React, и когда я перетаскиваю значок своей платы, когда я нажимаю на него, это приводит меня к новому холсту. На первом холсте (ID Canvas: 1) я перетаскиваю свою доску или с помощью текста, который я создал. Нажав на эту плату, я снова перенесен на новый холст (ID Canvas: 2), и я перетаскиваю значок своей платы с помощью некоторого текста/метки, которую я создал. Теперь, когда я возвращаюсь к своему предыдущему холсту (ID Canvas: 1), текст/этикетка исчезает или побуждает меня снова написать этикетку/текст. Нажав на доску, которая приведет меня к идентификатору Canvas: 2, текст/этикетка также исчезает. Это как каждый раз, когда я оставляю этот холст и возвращаюсь, сохраненный ярлык/текст исчезает.

Код: Выделить всё

import Navbar from "../components/Navbar"
import { PlusCircleIcon, ArrowUturnLeftIcon, WindowIcon, TrashIcon} from
'@heroicons/react/24/solid';
import StickyNote2Icon from '@mui/icons-material/StickyNote2';
import {Link, useLocation} from "react-router-dom";
import InfiniteCanvas from "../components/InfiniteCanvas";
import { useState, useEffect, useMemo} from "react";

type IconData = {
id: string;
type: string;
x: number;
y: number;
text: string;
showInput: boolean;
isLabel?: boolean;
showIcon: boolean;
dropped?: boolean;
};

type Entry = {
id: string;
description: string[]
}

export default function TruthJournal(){
const [icons, setIcons] = useState([
{ id: "note", type: "note", x: 50, y: 12, text: "", showInput: false, showIcon:
true },
{ id: "delicious", type: "delicious", x: 110, y: 10, text: "", showInput: false,
showIcon: true},
]);

const [showCanvas, setShowCanvas] = useState(true);
const [canvasId, setCanvasId] = useState(1);
const [previousCanvasIds, setPreviousCanvasIds] = useState([]);
const location = useLocation();
const entries: Entry[] = useMemo(() => {
return location.state?.entries || [];
}, [location.state?.entries]);

const loadIcons = (id: number) => {
const savedIcons = localStorage.getItem(`icons-${id}`);
if (savedIcons) {
setIcons(JSON.parse(savedIcons));
} else {
setIcons([]);
}
};

useEffect(() => {
const savedCanvasIds = localStorage.getItem("canvas-ids");
if (savedCanvasIds) {
const parsedIds = JSON.parse(savedCanvasIds);
setPreviousCanvasIds(parsedIds);
setCanvasId(parsedIds[parsedIds.length - 1] || 1);
}
}, []);

useEffect(() => {
if (canvasId) {
loadIcons(canvasId);
}
}, [canvasId]);

const handleCreateNewCanvas = () => {
setCanvasId((prevId) => {
const newCanvasId = prevId + 1;

setPreviousCanvasIds((prev) => {
const updatedIds = [...prev, newCanvasId];
localStorage.setItem("canvas-ids", JSON.stringify(updatedIds));
return updatedIds;
});

setIcons([]);
return newCanvasId;
});

setShowCanvas(true);

};

const handleBackClick = () => {
if (previousCanvasIds.length > 1) {
const prevIndex = previousCanvasIds.indexOf(canvasId) - 1;
if (prevIndex >= 0) {
setCanvasId(previousCanvasIds[prevIndex]);
}
}
}

const handleMouseDown = (e: React.MouseEvent) => {
console.log("Mouse down", e);
};

const handleMouseMove = (e: React.MouseEvent) => {
console.log("Mouse move", e);
};

const handleMouseUp = () => {
console.log("Mouse up");
};

const handleWheel = (e: React.WheelEvent) => {
console.log("Mouse wheel", e);
};

const handleDragOver = (e: React.DragEvent) => {
e.preventDefault();
};

const handleDrop = (e: React.DragEvent) => {
e.preventDefault();
const imageType = e.dataTransfer.getData("image-type");
const canvasBounds = e.currentTarget.getBoundingClientRect();
const mouseX = e.clientX - canvasBounds.left;
const mouseY = e.clientY - canvasBounds.top;

if (imageType) {
const newIcon = {
id: `${imageType}-${Date.now()}`,
type: imageType,
x: mouseX,
y: mouseY,
text: "",
showInput: imageType === "note",
isLabel: imageType === "delicious" ,
showIcon: imageType !== "note",
dropped: true
};

const updatedIcons = [...icons, newIcon];
setIcons(updatedIcons);
localStorage.setItem(`icons-${canvasId}`, JSON.stringify(updatedIcons));

}

}

const handleDragStart = (e: React.DragEvent, imageType: string) => {
e.dataTransfer.setData("image-type", imageType);
console.log(`Drag started with type: ${imageType}`);
};

const handleInputChange = (e: React.ChangeEvent, id: string) => {
setIcons((prevIcons) =>
prevIcons.map((icon) =>
icon.id === id ? { ...icon, text: e.target.value } : icon
)
);
};

console.log(showCanvas);

useEffect(() => {
const savedIcons = localStorage.getItem("icons");
if (savedIcons) {
setIcons(JSON.parse(savedIcons));
}
}, []);

useEffect(() => {
if (entries.length > 0) {
setIcons((prevIcons) => {
const updatedIcons = entries.map((entry, index) => {
const generateRandomPosition = () => {
const canvasWidth = window.innerWidth;
const canvasHeight = window.innerHeight;
return {
x: Math.floor(Math.random() * (canvasWidth - 100)),
y: Math.floor(Math.random() * (canvasHeight - 100)),
};
};

const isOverlapping = (x: number, y: number, icons: IconData[]) => {
const margin = 20;
return icons.some(
(icon) =>
Math.abs(icon.x - x) < margin && Math.abs(icon.y - y) < margin
);
};

let position = generateRandomPosition();
while (isOverlapping(position.x, position.y, prevIcons)) {
position = generateRandomPosition();
}

return {
id: `entry-${entry.id || index}`,
type: "note",
x: position.x,
y: position.y,
text: entry.description.join(", "),
showInput: true,
showIcon: false,
isLabel: false,
dropped: true,
};
});

return [...prevIcons, ...updatedIcons];
});
}
}, [entries]);

return (



< /code>

     

{showCanvas &&
(

)}



{icons.map((icon) => (


{icon.showInput ? (
 handleInputChange(e, icon.id)}
autoFocus
style={{ left: `${icon.x}px`, top: `${icon.y}px` }}
className="absolute font-annie pl-3 placeholder-white  text-[12px] text-white border-none bg-customBrown w-[18rem] h-[3rem]"
placeholder="Enter text"
/>
) : icon.isLabel  && (

 handleInputChange(e, icon.id)}
autoFocus
className="font-annie placeholder-customBrown text-[12px] text-center border-none text-customBrown  bg-transparent w-[5rem] relative top-3 right-[1.50rem] focus:border-none focus:outline-none"
placeholder="Enter text"
/>

)}

{icon.showIcon && (
onClick={handleCreateNewCanvas}
draggable="true"
onDragStart={(e) =>  handleDragStart(e, icon.type)}
className="w-[2.5rem] h-[2.5rem] object-contain border-box absolute"
style={{
left: `${icon.x}px`,
top: `${icon.y}px`,
width: "2rem",
height: "3rem",
}}
>
{icon.type === "note" ? (

) : icon.type === "delicious" ? (

) : null}

)}



))}

















)
}

Я пытался использовать локальное хранилище для сохранения данных, но все же сбрасывается каждый раз, когда я возвращаюсь на определенную страницу Canvas.


Подробнее здесь: https://stackoverflow.com/questions/794 ... new-canvas