[React Hooks]連想配列でのsetStateのやり方がわからない

Question

前提・実現したいこと

React Hooksを使って連想配列のstateを更新したいと思っています。
しかしsetの部分で以下のようなエラーがでました。
連想配列の変更の仕方についてはhttps://qiita.com/Mitsuw0/items/b9518b510568e1778b0eを参照しました。
わかる方がいましたらコメントお願いします。

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

Unexpected token, expected ","

該当のソースコード

const [time, setTime] = React.useState({
1: new Date(),
2: new Date(),
・・・
});

<Sample time={time} setTime={setTime} />

export default function Sample(props) {
//省略
const handleChange = date => {
    let day = date.getDate();
    props.setTime(props.time => ({ ...props.time, day: date })); //エラー
};
//省略
}

Answer 1

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

- props.setTime(props.time => ({ ...props.time, day: date }));
+ props.setTime({ ...props.time, [day]: date });

Comments

[aiai8976]

そのようにしましたが、setしても更新されません。
他に何か問題があるのでしょうか。

[jun68ykt]

コード全体を見ないと何ともいえない感じですね。React.useState({　しているほうのコンポーネントと、const handleChange 　が書いてあるコンポーネントは、別コンポーネントのように見えますが、その両方のソースコード全体を、ご質問に追記されると（私だけではなく他の回答者様にも）何か原因が分かるかもしれません。

[aiai8976]

下の方のコメントのようにあらかじめ登録したstateに加えてday: 時間という形でstateが更新されていました。

Answer 2

useEffectから得られたsetTimeにはこの場合連想配列を直接渡すのが正しい方法です。

    props.setTime({ ...props.time, day: date });

また、{1: Date, 2: Date, 3: Date}がセットされることを期待しておられると思いますが、この場合{1: Date, 2: Date, day: Date}という状態がセットされてしまうでしょう。

    let day = date.getDate()
    let time = {...props.time}
    time[day] = date.getDate()
    props.setTime(time)

と一時的にコピーを取って変更するようにするとうまく行くでしょう。

Comments

[aiai8976]

上の方のコメントの通りにやると3がdayに変わるのではなく、3はそのままでもともとあるstateのキーに新たにday:時間が登録されていました。
A_kirisakiさんのtime[day] = dateは間違いですか？この方法でやってみたところstateは何も更新されないままでした。