Здравствуйте. Подскажите, пожалуйста, как правильно реализовать следующую логику:
У меня есть следующая структура:
class NavigateServise записывает и читает данные с localStorage.
navigateServise.js
class NavigateServise {
constructor() {
this.list = [];
this.init();
}
init() {
console.log("init");
}
setData = (id) => {
this.list = this.list.includes(id) ? this.list.filter(n => n !== id) : [...this.list, id];
const listM = JSON.stringify(this.list);
window.localStorage.setItem('data', listM);
}
getData = () => {
return window.localStorage.getItem('data');
}
}
const navigateServise = new NavigateServise();
export {navigateServise};
Item.js
const Item = (props) => {
console.log('Item render');
return (
<li
className="item"
onClick={props.clicked}
>
{props.item.value}
</li>
)
}
export default Item;
App.js
import React from "react";
import Item from "./Item";
import {navigateServise} from "./navigateServise";
class App extends React.Component {
constructor(props) {
super(props);
this.dataFromLocalStorage = JSON.parse(navigateServise.getData());
console.log(this.dataFromLocalStorage);
this.items = [
{id: 1, value: "item 1"},
{id: 2, value: "item 2"},
{id: 3, value: "item 3"},
{id: 4, value: "item 4"},
{id: 5, value: "item 5"},
{id: 6, value: "item 6"},
{id: 7, value: "item 7"},
{id: 8, value: "item 8"}
];
}
setData = (id) => {
navigateServise.setData(id);
};
render() {
return (
<React.Fragment>
{
this.items.map((item, index) => {
return (
<ul
className=""
key={index}
>
<Item
item={item}
clicked={() => this.setData(item.id)}
/>
</ul>
);
})
}
</React.Fragment>
);
}
}
export default App;
Когда данных в localStorage нет, я их туда записываю. Кода я перезагружаю страницу, на данный момент и click на элементы я заново перезаписываю данные. Мне же нужно продолжить работать с существующими. Буду благодарен любой помощи.
Средний