3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【備忘録】setStateはすぐにstateに反映させるものじゃないから気をつけろ

Posted at

ハマったのでメモ書き。
若干の謎は残ってるので誰か神が下りてくることを待っている。(自分でも調べてる)

###問題のソース
https://github.com/sakaku193/p_react_web/blob/branch/todo_app/src/App.js

###何が問題だったか
タイトル通りです。
すぐに反映されないため、コメントアウトしている書き方はダメです。

//NG
localStorage.setItem("todos", JSON.stringify(this.state.todos))
//OK
localStorage.setItem("todos", JSON.stringify(todos))

参考資料
[React.js] setStateしても直ちにstateは変更されない

###何が謎か
今回

todos = [...todos, newTodo]

としているが。

todos.push(newTodo)

とすると何故かNGの書き方でも意図したとおりに動いた。
React的には即反映はされないのが正しく、あえて制御しているものだと考えられるため
pushを使ってNGの書き方をするのは良くないんじゃないかと考えている。
stateは即時反映されるものではないと考えながらコードを書いていくのが良いのではないだろうか。

###謝辞
この問題が気になり、いろいろな方に聞きました。
お忙しいにも関わらずお力を貸していただきました。
おかげで様々な知見を得られました。
大変助かりました。ありがとうございます。

3
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?