Home > Software design >  How to save new state in db.json?
How to save new state in db.json?

Time:05-18

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]);
  })
}}
  • Related