stateのimmutabilityな管理への道。（map編）

Question

immutableに扱わないと内容の壊れてしまうstateさん

こんにちは。最近ようやく配列的なstateを管理してアプリケーションを作るようになった者です。
配列の一部の内容をtextInputのvalueとして管理する方法を学んだばかりです。
immutableに管理できるimmutability-helperを使用しています。

さて、ある程度の処理であれば上述のように処理はできるのですが。。。

map()内でのstateの処理を考えなければならない時、どのように処理させたら良いのでしょうか？

僕は凡人ですので、人間的にこうだったらいいなという記述をして、処理が行えずに困ってしまいました。

var addDetection = [ [0,0], [0,1] ]

addDetection.map(
        key => {
          var keyWhatDay = key[0]
          var keyWhatTime = key[1]
          var newSchedule = update(this.state.schedule, { [keyWhatDay] : { [keyWhatTime] : { STATUS : { $set: true }, ID : { $set: ID } } } })
          console.log('new aaa/' )
          console.dir(newSchedule)
          this.setState({schedule:newSchedule})
        }
      )

都合上コードのmapの中身は二つの配列のみで、描き崩せそうなものとしていますが、本来、変動するものなので、mapやforEachなどの、中身総当たり方式で処理をしてもらわないと困ります。

あまりにもうまく動かないので、console.logなどでのデバックを行いました。

map内のnewScheduleについては、それぞれaddDetectionの二つの配列ごとに、それぞれ00と01の位置に書き込めることはわかりましたが、
分離しています。
immutableに書こうとしたのに、分離するなんて困ってしまいます。

どのようなconsole.logの結果かというと、
00の時は　00　が true 01がfalse
01の時は　00　が false 01がtrue
となっており、これをそれぞれsetStateしようとして、失敗して、
このmapの外側でのconsole.dir(this.state.schedule)
の表示が 00 false 01 false　となってしまうようです。(この位置だけでの話ではなく、renderでもこの処理にて表示させるところがあるので、falseなのは間違い無いと思います。（多分）)

このような処理の時に、どのようにうまく記述するのでしょうか？

解決しました。

addDetectionFunc  = ( addDetection, subjectID ) => {
    const self = this
    return new Promise(function(resolve) {
      addDetection.forEach(key => {
        var keyWhatDay = key[0]
        var keyWhatTime = key[1]
        self.setState(prevState => {
          const newSchedule = update(prevState.preSchedule, { [keyWhatDay] : { [keyWhatTime] : { STATUS : { $set : true }, ID : { $set : subjectID } } } })
          return {preSchedule: newSchedule}
        })
      })
      resolve()
    })
  }

このように一旦prescheduleにsetStateして、promise thenのなかでもう一度本命にsetStateすると言う回りくどい形にはなりましたが、これが一番immutableにかけていると思います。

Answer 1

setStateが非同期であるのが原因だと思います。

setState() - React

どのようなconsole.logの結果かというと、

00の時は　00　が true 01がfalse
01の時は　00　が false 01がtrue

00 でsetStateが実行されるとき、それはすぐにthis.stateに反映されません。
なので01でupdate(this.state.schedule, ...)とするとき、このscheduleではまだ00がfalseなのです。

結果、key=00 では 00 true 01 false がsetStateされ、key=01 では 00 false 01 true がsetStateされるので、後者が上書きして 00 false 01 true となったわけです。

解決策としては、①setStateをまとめて1回実行するか、②setStateには「古いstateを受け取って新しいstateを返す」関数を渡せますので、それを利用することです。

①setStateをまとめて1回実行する

let newSchedule = this.state.schedule

addDetection.forEach(key => {
    ...
    newSchedule = update(newSchedule, { [keyWhatDay] : { [keyWhatTime] : { STATUS : { $set: true }, ID : { $set: ID } } } })
})

this.setState({schedule: newSchedule})

②setStateに関数を渡す

addDetection.forEach(key => {
    this.setState(prevState => {
        ...
        const newSchedule = update(prevState.schedule, { [keyWhatDay] : { [keyWhatTime] : { STATUS : true, ID : ID } } })
        return {schedule: newSchedule}
    })
})

テストしていないのでミスがあるかもしれませんがご容赦ください。

Comments

[MOTOMUR]

こんばんは。
回答ありがとうございます。
結果から言うとどちらもうまくいきませんでした。
一番consoleの内容が完成に近かった②を使用して説明します。
まず、addDetection自体が非同期になってしまうので、後方に他の関数に行くものがありましたが、
returnの後ろに、その関数をコールバックとして付属しました。
すると、毎回addDetectionがリセットされてしまい、また片方ずつ失敗するようになってしまいました。
そこで、プロミスで順番を取るように変えてみたところ、うまく動いたので報告いたします。
ありがとうございます。

[karamarimo]

> 後方に他の関数に行くものがありましたが、
returnの後ろに、その関数をコールバックとして付属しました。

これはどういうことでしょうか？
質問文にコードを書いていただけますでしょうか。
また、質問文のPromiseを使ったコードを見ましたが、Promiseを使う意味がないように思います。

[MOTOMUR]

＞これはどういうことでしょうか？

setState後に動かしたい関数がありました。しかし、コールバックでやろうと思ったのですが、

　　return {~~:~~ },　this.function

のようにしてみるとうまく動かなかったので、Promiseで順序を取った次第です。

＞Promiseを使う意味がないように思います。

他にも同期を取った後に、発火させたい関数がありまして、それも含めて同期させるためにPromiseを使用しました。
なので、先ほどの解決コードとして載せたものは、Promise.all[]の中に入れて処理させています。

[karamarimo]

> return {~~:~~ },　this.function

の意味がよく分からないです。コードを載せていただければアドバイスできると思います。

Promiseを使う意味がないといったのは、resolve() が setState の完了を待たずにすぐに実行されるためです。

ちなみに、本当に setState の完了を待つ必要があるのでしょうか。
②のように setState に関数を渡すパターンを使えば、setState のコールバックを使わずともやりたいことができるのではないかと思います。