Блог

Главная - Вопросы по программированию - Удалить элементы реакции

Удалить элементы реакции

#reactjs

Вопрос:

У меня есть код, который описывает все элементы списка на странице. И у каждого элемента списка есть кнопка для его удаления. Но после перезагрузки страницы все элементы списка восстанавливаются. Как избежать восстановления после перезагрузки?

 import React, {useState} from "react";

export let List = () => {

let [deletedTasks, setDeletedTasks] = useState([]);
let [tasks, setTasks] = useState([
{ id: 1, title: 'title 1'},
{ id: 2, title: 'title 2'},
{ id: 3, title: 'title 3'}
]

let deleteElements = (id) => {
    const task = tasks.find((e) => e.id === id);
    setDeletedTasks((p) => [...p, task]);
    setTasks((p) => p.filter((e) => e.id !== id));
}

return (<div>
    <div>
        <ul>{tasks.map(el =><li>{el.title}
            <button onClick={() => deleteElements(el.id)}>Delete elements</button>
        </li>)}</ul>
    </div>
</div>)
}

Комментарии:

1. при каждом обновлении страница сбрасывается в исходное состояние. сохраните все ваши изменения в локальном хранилище. developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Ответ №1:

вы можете синхронизировать свою задачу с localStorage, так что даже при обновлении ваши задачи будут сохранены.

 import React, { useState, useEffect } from "react";

export let List = () => {
  const storedTasks = localStorage.getItem("tasks");
  let [tasks, setTasks] = useState(
    storedTasks || [
      { id: 1, title: "title 1" },
      { id: 2, title: "title 2" },
      { id: 3, title: "title 3" },
    ]
  );

  let deleteElements = (id) => {
    setTasks((p) => p.filter((e) => e.id !== id));
  };

  useEffect(() => {
    localStorage.setItem("tasks", JSON.stringify(tasks));
  }, [tasks]);

  return (
    <div>
      <div>
        <ul>
          {tasks.map((el) => (
            <li>
              {el.title}
              <button onClick={() => deleteElements(el.id)}>
                Delete elements
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

Ответ №2:

Вам необходимо использовать REST API для хранения данных (один из вариантов, который вы можете использовать, — firebase).

Другим вариантом, хотя и не рекомендуемым решением, является использование локального хранилища для сохранения данных и их получения после перезагрузки

Например:

 let deleteElements = (id) => {
const task = tasks.find((e) => e.id === id);
 setDeletedTasks((p) => {
     localStorage.setItem('deletedFiles'  , JSON.stringify([...p, task])); 
    return [...p, task]
 });
setTasks((p) => p.filter((e) => e.id !== id));
}


useEffect(() => {
const deletedItems = localStorage.getItem('deletedFiles'); 
if(deletedItems){
    setDeletedTasks(JSON.parse(deletedItems))
}
}, [])
Метки: