[React]stateを変更しても表示が更新されない

Question

前提・実現したいこと

Reactのstate管理についてですが、jsonを書き換えてsetした値が更新されているにもかかわらず再描画されません。値の表示は変更前のままになっています。
何か改善策はあるでしょうか。

発生している問題・エラーメッセージ

state変更後、再描画されない

該当のソースコード

const [selectedTime, setSelectedTime] = React.useState({
    "1": {
      start: new Date(),
      end: new Date(),
    },
    "2": {
      start: new Date(),
      end: new Date(),
    },
    "3": {
      start: new Date(),
      end: new Date(),
    },
  });

return(
...
{Object.keys(selectedTime).map((key) => {
                    let obj = selectedTime;

                    const handleStartTimeChange = (date) => {
                      obj[key].start = date;
                      setSelectedTime(obj);
                      console.log(selectedTime); //selectedTimeの値が更新されていることは確認
                    };

                    const handleEndTimeChange = (date) => {
                      obj[key].end = date;
                      setSelectedTime(obj);
                    };

                    return (
                      <MuiPickersUtilsProvider utils={DateFnsUtils}>
                        <Grid container justify="space-around">
                          <KeyboardTimePicker
                            margin="normal"
                            id="start"
                            label="Start Time"
                            value={selectedTime[key].start}
                            onChange={handleStartTimeChange}
                            KeyboardButtonProps={{
                              "aria-label": "change time",
                            }}
                          />
                          <KeyboardTimePicker
                            margin="normal"
                            id="end"
                            label="End Time"
                            value={selectedTime[key].end}
                            onChange={handleEndTimeChange}
                            KeyboardButtonProps={{
                              "aria-label": "change time",
                            }}
                          />
                        </Grid>
                      </MuiPickersUtilsProvider>
                    );
                  })}

Answer 1

こんにちは。
handleStartTimeChange の以下の２行

修正前：

obj[key].start = date;
setSelectedTime(obj);

を、以下のように修正してみると、いかがでしょうか？

修正後：

setSelectedTime({ ...obj, [key]: { ...obj[key], start: date } });

handleEndTimeChange　のほうも同様です。

追記

リファクタリング案を挙げておきます。map の中で、各 dateの変更ハンドラーを作るのではなく、ひとつの変更ハンドラですべてをまかなうこともできるかなと思います。以下のような感じです。（※動作確認はしていません）

const SomeComponent = props => {
  const [selectedTime, setSelectedTime] = React.useState({
    "1": {
      start: new Date(),
      end: new Date()
    },
    "2": {
      start: new Date(),
      end: new Date()
    },
    "3": {
      start: new Date(),
      end: new Date()
    }
  });

  const handleTimeChange = (key, name, date) => {
    setSelectedTime({ ...selectedTime, [key]: { ...selectedTime[key], [name]: date } });
  };

  return (
    <div>
      {Object.entries(selectedTime).map(([key, { start, end }]) => (
        <MuiPickersUtilsProvider utils={DateFnsUtils} key={`picker-${key}`}>
          <Grid container justify="space-around">
            <KeyboardTimePicker
              margin="normal"
              id="start"
              label="Start Time"
              value={start}
              onChange={date => handleTimeChange(key, "start", date)}
              KeyboardButtonProps={{
                "aria-label": "change time"
              }}
            />
            <KeyboardTimePicker
              margin="normal"
              id="end"
              label="End Time"
              value={end}
              onChange={date => handleTimeChange(key, "end", date)}
              KeyboardButtonProps={{
                "aria-label": "change time"
              }}
            />
          </Grid>
        </MuiPickersUtilsProvider>
      ))}
    </div>
  );
};

Comments

[aiai8976]

いけました！ありがとうございます。
スプレッド構文について勉強します。

[jun68ykt]

どういたしまして????
> いけました！
とのことでよかったです。
> スプレッド構文について勉強します。
はい。新しいstate を作るとき、スプレッド構文はよく使います。

それと、map の中で、各dateを変えるときのハンドラーを個別に作るのではなく、mapの外にひとつ作っておいて、これを 1〜3 の、start および end の両方の場合の changeハンドラにするようにもできると思いますので、追記しておきました。
参考になれば幸いです。

[aiai8976]

リファクタリング案に変更したところうまくいけました。
冗長だとわかっていたのですが、書き方がわからず放置していました。
entriesを使えばいいんですね。
大変勉強になりました。
ご丁寧にありがとうございました。
また、機会があればよろしくお願いします。

[jun68ykt]

どういたしまして。丁寧なご返信ありがとうございます。

Object.entries もそうですが、リファクタしたほうの

setSelectedTime({ ...obj, [key]: { ...obj[key], start: date } });

で使っているスプレッド構文と、[key]: {　で使っている、Computed property names の合わせ技など、ES2015以降に追加された新しいメソッドや構文が、白紙からコードを書く時点で、スラスラ出てくるようになると、Reactのコードを楽に速く、かつ、初めから正解に近いコードを書けるようになります。いろんな人から、これはイイと思った技を盗んで、ご自身のものにしていけばよいかと思います。

Answer 2

obj[key].start = date;のように、stateとして管理されているオブジェクトを破壊的に変更するのは適切ではありません。

コピーして変更を行ってから、変更後の新しいオブジェクトをsetStateしてください。