dmitry-l
@dmitry-l

Почему React.StrictMode ломает приложение?

Обычное todo приложение. Есть функция, которая при клике ставит метку completedэлементу из списка:

const toggleHandler = (id) => {
    setTodos(prevState => {
        return prevState.map(todo => { // проблема тут
            if (todo.id === id) todo.completed = !todo.completed
            return todo
        })
    })
}

Проблема в том, что в строгом режиме setTodos вызывается дважды, проставляя сперва completed: true и затем completed: false и с виду выглядит будто ничего не происходит.
В качестве решения можно отказаться от колбэка и обновлять state через spread.
Но как исправить эту проблему используя колбэк с предыдущим состоянием и не выключая строгий режим?
  • Вопрос задан
  • 308 просмотров
Решения вопроса 1
@i1yas
Внутри map делать вот такое
if (todo.id === id) todo.completed = !todo.completed
return todo

Действительно, что могло пойти не так.

Strict Mode, в частности:
Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following methods:

...
setState updater functions (the first argument)
...


Вот это выражение:
if (todo.id === id) todo.completed = !todo.completed
это сайд-эффект.

Должно быть:
if (todo.id === id) return { ...todo, completed: !todo.completed }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы