I have an array in my db.json. And I can add a new object. But every time I reload the page, the data is reset to the default state. How can I store data in such a way that it is written to db.json and displayed on reload?
My db.json:
{"item": [
{
"text": "Пошел в свой первый класс",
"id": 0,
"data": {
"year": 2012,
"day": 25,
"month": 1
}
},
{
"text": "Поехал на чемпионат по бейсболу",
"id": 1,
"data": {
"year": 2018,
"day": 14,
"month": 3
}
},
{
"text": "Поступил в институт",
"id": 2,
"data": {
"year": 2007,
"day": 12,
"month": 4
}
}
]}
My state:
const [value, setValue] = useState('');
const [valueYear, setValueYear] = useState('');
const [valueDate, setValueDate] = useState('');
const [valueMonth, setValueMonth] = useState('');
const [table, setTable] = useState([]);
useEffect(() => {
axios.get("http://localhost:3004/item").then(({ data }) => {
setTable(data);
})}, [])
My add function:
const addTask = (value, valueYear, valueDate, valueMonth) => {
if (value) {
const newItem = {
id: table.length,
text: value,
data: {
year: valueYear,
day: valueDate,
month: valueMonth,
},
}
setTable([...table, newItem]);
}}
CodePudding user response:
To whrite a file in Javascript you need to use NodeJS. In this case I advice you use localStorage. When you set new state of table put the follow code:
setTable([...table, newItem]);
localStorage.setItem('table', [...table, newItem]);
And capture it on initial state, like this:
const [table, setTable] = useState(localStorage.getItem('table') || []);
CodePudding user response:
const addTask = (value, valueYear, valueDate, valueMonth) => {
if (value) {
const newItem = {
id: table.length,
text: value,
data: {
year: valueYear,
day: valueDate,
month: valueMonth,
},
}
axios.post('http://localhost:3004/item', newItem).then(() => {
setTable([...table, newItem]);
})
}}