Почему при обращении к массиву по индексу я получаю одно значение, а при выводе списка другое?

Question

[galliard]

Делаю пробный проект на реакте, столкнулся с таким то ли багом, то ли фичей:

const [todos, setTodos] = useState<Todo[]>([])

  const toggleHandler = (id: number) => {
    setTodos(prevState => {
      const result = prevState.map(todo => {
        if (todo.id === id) {
          todo.completed = !todo.completed
        }
        return todo
      })

      console.log(result[0])
      console.log(result)

      return result
    })
  }

Результат такой:


То есть при запросе объекта по индексу я получаю правильный объект с измененным состоянием, а при выводе всех объектов у меня они в предыдущем состоянии. Как такое вообще может быть?

Так же замечу, что при использовании метода forEach я получаю правильный объект с completed = true, pop тоже возвращает правильный объект. А вот в случае с map я получаю старый объект с completed = false.

Comments

[Tim]

Там ведь где видео смотрите это, в комментариях есть ответ и решение

[galliard]

Tim, вариант из комментов, конечно, сработал. Но мне все-же интересно, почему не работает изначальный вариант, хотя по идее должен. Я и раньше писал аналогичный код и подобных проблем не было, сталкиваюсь впервые.

[Tim]

galliard, там нужно вернуть новый массив. В ответах люди предполагают, что проблема может быть в версиях реакта в том числе в React.StrictMode

[galliard]

Tim, так map и возвращает новый массив. Забавно, что если в сеттер передать не каллбек, а непосредственно результат map, то все работает. Добавление ничего не дало.

[Tim]

galliard, map возвращает новый массив. А объекты внутри массива передаются по ссылке

[galliard]

Tim, и? Объект то с новым состоянием, почему тогда в массиве он по прежнему со старым? Они же не иммутабельные.