Reactで配列のstateを変更しても再描画されない

Question

前提・実現したいこと

Reactで動画を複数個登録できる動的フォームを作成しております。
動画にチェックボックスを用意しているのですがstateを更新しても、再描画がされません。
チェックボックスを押下後、再度同じチェックボックスを押下すると反映されるのですが、原因を教えていただきたいです。
stateは新しいインスタンスを作成し、反映されないとのことで下記を参考にしてみたのですが解決しませんでした。
https://teratail.com/questions/305000

該当のソースコード

export const VideoRelationForm = (prop) => {
    const initialVideoState = {
        'video': '',
        'valid_flg': false,
    }
    const [title, setTitle] = useState("");
    const [video, setVideo] = useState([initialVideoState]);

    const handleSubmit = (e) => {
        e.preventDefault();

        const formData = new FormData();
        formData.append('title', title);
        video.map(v => {
            formData.append('video', v.video, v.video.name);
            formData.append('valid_flg', v.valid_flg);
        });

        // API通信
    }

    const AddForm = (e) => {
        e.preventDefault();
        setVideo([...video, initialVideoState]);
    }

    const handleChange = (hogehoge, e) => {
        e.preventDefault();
        var newVideo = [...video];
        newVideo.find(v => v===hogehoge).valid_flg= e.target.checked;
        setVideo(newVideo);
    }

    return(
            <label>
                タイトル:
                <input type="text" name="title" value={ title } onChange={ (e) => setTitle(e.target.value) } />
            </label>
            {video.map(v =>
                    <>
                        <label>
                            動画:
                            <input type="file" name="video" accept='video/*' alt="動画" />
                        </label>
                        <label>
                            動画タイプ:
                            <input type="checkbox" name="valid_flg" onChange={ (e) => handleChange(v, e) } checked={v.valid_flg} />
                        </label>
                    </>
            )}
    )
}

試したこと

結果変わらず

    const handleChange = (hogehoge, e) => {
        e.preventDefault();
        var newVideo = [];
        video.map( v => {
            if(v===hogehoge){
                v.valid_flg = e.target.checked;
            }
            newVideo.push(v);
        });
        setVideo(newVideo);
    }

Comments

[hoshi-takanori]

handleChange の中で newVideo.find(v => v===hogehoge).valid_flg= e.target.checked としていますが、これだと既存のオブジェクトを書き換えてしまいますね。

[te_ff]

ありがとうございます！
どのように対応すれば再描画されるかわかりますでしょうか？

[hoshi-takanori]

その行を
newVideo = video.map(v => v === hogehoge ? { ...v, valid_flg: e.target.checked } : v);
と書き換える、かなぁ。

Answer 1

HandleChangeにて
e.preventDefault();
を記載していることにより、動作がおかしくなっていたようです。

const handleChange = (hogehoge, e) => {
    var newVideo = [...video];
    newVideo.find(v => v===hogehoge).three_dimensional_flg = e.target.checked;
    setVideo(newVideo);
}

で解決しました。

Answer 2

配列をmapする場合は、keyを指定しましょう。

            {video.map(v =>
                    <Fragment key={v}>
                        <label>
                            動画:
                            <input type="file" name="video" accept='video/*' alt="動画" />
                        </label>
                        <label>
                            動画タイプ:
                            <input type="checkbox" name="valid_flg" onChange={ (e) => handleChange(v, e) } checked={v.valid_flg} />
                        </label>
                    </Fragment>
            )}

Comments

[maisumakun]

本題ではありませんが、<input type="file">の中身の問題は大丈夫でしょうか？

[te_ff]

ありがとうございます！
keyを指定してみたのですが、結果変わりませんでした。
fileの中身に関してはまだ試していませんが、fileにvalueで値指定はできないため、onChangeのみで対応しようかと思っています。
ただ、出力している項目に関してはstateで管理したほうがいいかと思いますのでcheckboxに関してはstateで管理できればと考えております。

[maisumakun]

ブラウザコンソールになにかメッセージが出ていたりはしませんか？

[te_ff]

要素を追加した際にFragmentのKeyが[object Object]となっているためエラーとなっておりました。
ただ、要素を一つも追加していない（要素が一つ）時にも同様の動きが発生しているため特に関係はないかと思っております。
また、mapで戻り値がないためWARNINGが表示されていたため、
https://www.javaer101.com/en/article/27207646.html
こちらを参考に
```
{video.map(v => (
))}
```
としてみたのですが結果変わらずでした。。。

要素を追加した際のエラー
```
Warning: Encountered two children with the same key, `[object Object]`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
```