Почему при перезагрузке страницы мои данные пропадают?

Question

[webjun]

Делаю тудулист и хочу, чтобы при перезагрузке страницы туду пользователя сохранялись, но почему-то данные пропадают, хотя в локальной памяти сохраняются, в чем может быть проблема?

const [value, setValue] = React.useState<string>("");
  const [todos, setTodos] = React.useState<Itodo[]>([]);
  const inputRef = React.useRef<HTMLInputElement>(null);

const addTodo = () => {
    setTodos([
      ...todos,
      {
        id: Date.now(),
        complete: false,
        title: value,
      },
    ]);
    localStorage.setItem("todos", JSON.stringify(todos));
    localStorage.getItem("todos");
    setValue("");
  };

Comments

[lololoshka2010]

const [todos, setTodos] = React.useState <Itodo[]> (localStorage.getItem("todos") || [])

вы ни в какой стейт не ложите их ,естетсвенно с ними ничего не происходит

Answer 1

[0xD34F]

Встречный вопрос: почему вы решили, что должно быть иначе? Код, который бы доставал данные из localStorage и клал их в todos, где он, почему его нет? Должен быть, например:

const [ todos, setTodos ] = useState(() => {
  let todos = null;

  try {
    todos = JSON.parse(localStorage.getItem('todos'));
  } catch (e) {};

  return Array.isArray(todos) ? todos : [];
});

Уверен, здесь вы ждёте, что добавляемый объект окажется в localStorage:

setTodos([
  ...todos,
  {
    id: Date.now(),
    complete: false,
    title: value,
  },
]);
localStorage.setItem("todos", JSON.stringify(todos));

Этого происходить не будет (ну, пока ещё что-то не добавите, и это "ещё что-то" тоже попадёт в localStorage не сразу). Вы не понимаете, что происходит при вызове setTodos. Откройте документацию и разберитесь. Сохранение в localStorage следует делать через useEffect:

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

Comments

[webjun]

Спасибо за разьяснение, вот я написал вот так но по-прежнему при перезагрузке все стирается..

React.useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
    const data = localStorage.getItem("todos");
  }, []);

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

[0xD34F]

webjun, я не понимаю, что вы говорите. Давайте-ка вы попробуете донести свою мысль ещё разок.

[webjun]

0xD34F, ранее вы посоветовали сделать сохранение данных через useEffect, я так и сделал но по-прежнему свою проблему не решил. Мне нужно было сохранить мои todos таким образом чтоб при перезагрузке страницы они не исчезали.. Вероятно я где-то допустил ошибку, поэтому и скинул код выше..

[0xD34F]

webjun, я по-прежнему не понимаю, что вы говорите. Вот здесь:

исчезали..

И вот здесь:

выше..

Я не знаю, что такое "..". Знаю, что есть просто точка. Есть две вертикальных точки. Есть три горизонтальных. Две горизонтальных точки - такого знака препинания в русском языке нет. Откуда эта хрень взялась и что вы хотите с её помощью сказать?

[webjun]

0xD34F, вы достаточно поздно начали меня не понимать. Начинать свое непонимание можно было гораздо раньше, а именно со слова "разьяснение" которое я написал с мягким знаком, а не твердым.

[webjun]

, я по-прежнему не понимаю, что вы говорите.

- я не говорю, а печатаю.

[0xD34F]

webjun, рад узнать, что не ошибся - помощь вам и в самом деле не нужна.

Answer 2

[webjun]

Основная загвоздка была в строгом режиме, после того как я его убрал все работало как должно, решение вопроса:

React.useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
    const data = localStorage.getItem("todos");
    if (typeof data === "string") {
      setTodos(JSON.parse(data));
    }
  }, []);

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

Comments

[0xD34F]

Основная загвоздка была в строгом режиме

Это, конечно же, чушь собачья. В чём были проблемы - написано в моём ответе. Как от этих проблем избавиться - тоже написано. Если бы вместо сочинения собственного говнокода сделали, что сказано, не пришлось бы колупаться со строгим режимом - при вычислении начального состояния через функцию всё корректно работает что с ним, что без него.

Ну и позорище.

[webjun]

0xD34F, я опубликовал решение к которому смог дойти, действительно можно и без строгого режима как вы и советовали. Отмечу ваш ответ решением, может это принесет вам спокойствие)