[React] Cloud Firestoreにupdateする際、フォームを編集しないと空の値で更新されてしまう

Question

不明点

ReactからCloud Firestoreにupdate(更新)する際、フォームに何かしら編集したら問題なく更新できるのですが、何もフォームをいじらずにsubmitすると、値が空になって更新されてしまいます。

理屈を仮定すると何もonChangeしてないからeの引数に何も入らずsetNameのe.target.valueが自ずと空になるから空の値が更新されてしまうのかなと思いますが、この問題を解決する方法が全くわからず困っています。

onChangeしない場合、今入っている値をそのまま更新する方法はありますか？

<h2>編集フォーム</h2>
    <form onSubmit={handleEditFormSubmit}>
        <input
            type="text"
            value={name !== '' ? name : createUser?.name || ''}
            placeholder="ユーザー名"
            onChange={(e) => setName(e.target.value)}
        />

        <button type="submit">編集</button>
    </form>

コード全文

import { useState } from 'react';
import firebase, { db } from '../../Firebase';
import Styles from './css/User.module.css';
import { useForm } from 'react-hook-form';
import { useCollectionData } from 'react-firebase-hooks/firestore';
import { UserTypes } from '../../types/types';

export const User = () => {
    const [name, setName] = useState('');
    const [pending, setPending] = useState(false);
    const [submitted, setSubmitted] = useState(false);
    const { register, formState: { errors }, handleSubmit } = useForm();

    const user = firebase.auth().currentUser;
    let authId: string | undefined;

    if (user != null) {
        user.providerData.forEach(() => {
            authId = user.uid;
        });
    }

    const OnSubmit = async () => {
        setPending(true);
        try {
            await firebase.firestore().collection('users').add({
                authId,
                name,
            });
            setSubmitted(true);
        } finally {
            setPending(false);
        }
    };

    const [list, loading, error] = useCollectionData<UserTypes>(db.collection('users'), { idField: 'docId' });
    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error...</div>;

    const createUser = list?.find((user) => user.authId === authId);

    const handleEditFormSubmit = async (event: React.FormEvent) => {
        event.preventDefault();
        setPending(true);
        try {
            if (createUser) {
                await firebase.firestore().collection('users').doc(createUser.docId).update({
                    name,
                });
                setSubmitted(true);
                window.location.reload();
            }
        } catch (error) {
            console.error('Error updating user:', error);
        } finally {
            setPending(false);
        }
    };

    return (
        <section className={Styles.user}>
            {!createUser ? (
                <div>
                    <h2>登録フォーム</h2>
                    <form onSubmit={handleSubmit(OnSubmit)}>
                        <input
                            {...register('name', { required: true })}
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            placeholder="ユーザー名"
                            name="name"
                        />
                        {errors.name?.type === 'required' && 'お名前が入力されていません'}

                        <button type="submit">登録</button>
                        {pending && 'Pending...'}
                    </form>
                </div>
            ) : (
                <div>
                    <h2>編集フォーム</h2>
                    <form onSubmit={handleEditFormSubmit}>
                        <input
                            type="text"
                            value={name !== '' ? name : createUser?.name || ''}
                            placeholder="ユーザー名"
                            onChange={(e) => setName(e.target.value)}
                        />

                        <button type="submit">編集</button>
                    </form>
                    {submitted && <p>更新しました</p>}
                </div>
            )}
        </section>
    );
}

Answer 1

失礼します、 name, pending, submitted は共に react-hook-form が管理してくれる状態なので、自力で管理する必要はありません（むしろ複雑化するので、重複した状態の管理はすべきではありません。Single Source of Truth 原則です。）

https://react-hook-form.com/get-started を確認して、「状態を管理して submit 時にその状態の値を取り出す」方法を確認しましょう。

https://ja.react.dev/learn/preserving-and-resetting-state が今回の defaultValuesと関係があるのでご確認するのをオススメします。（それだけでなく、このような込み入った画面をスパゲッティ化せずに構築するためには、ステートの扱いの勘所を身に着ける必要があるので、上記サイトを使って基礎を固めましょう。）

export const UserEditForm = ({ defaultValues }) => { // フォームの初期値は Props で受け取る
    const [name, setName] = useState(''); // 不要
    const [pending, setPending] = useState(false);  // 不要
    const [submitted, setSubmitted] = useState(false);  // 不要
    const {
      register,
      formState: { errors, isSubmitting, isSubmitSuccessful },
      handleSubmit
    } = useForm({ defaultValues });

    const onSubmit: SubmitHandler<{ name: string }> = (data) => console.log(data)

export const UserEditPage = () => {
   const [users, loading, error] = useCollectionData<UserTypes>(db.collection('users'), { idField: 'docId' });
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error...</div>;

   const curretUser = /* users データ からうまいこと目当てのデータを取ってきてください */;

   const mode = currentUser ? "編集モード" : "新規モード";

   // key を使うことで、 mode が変わるたびに form ごとまとめて UserEditForm をリセットできる
   return <UserEditForm key={mode} defaultValues={curretUserData} />
}

Answer 2

原因

const [name, setName] = useState('');

nameにはフォーム入力がなければuseStateの初期値である空文字が入っているから
当然setNameにも空文字が入りDBに空文字として再更新がかかる。

解決方法

ロジック側でDBの値を取得
const initialName = createUser?.name || '';
もしフォームに入力(useStateに更新)があればその値をDBに、なければ元々の値を入れるようにする

await firebase.firestore().collection('users').doc(createUser.docId).update({
    name: name !== '' ? name : initialName,
});

コード全文

import { useState } from 'react';
import firebase, { db } from '../../Firebase';
import Styles from './css/User.module.css';
import { useForm } from 'react-hook-form';
import { useCollectionData } from 'react-firebase-hooks/firestore';
import { UserTypes } from '../../types/types';

export const User = () => {
    const [name, setName] = useState('');
    const [pending, setPending] = useState(false);
    const [submitted, setSubmitted] = useState(false);
    const { register, formState: { errors }, handleSubmit } = useForm();

    // Firebaseでログインしたユーザーのuidを取得
    const user = firebase.auth().currentUser;
    let authId: string | undefined;
    if (user != null) {
        user.providerData.forEach(() => {
            authId = user.uid;
        });
    }

    // 新規ユーザー登録フォーム
    const OnSubmit = async () => {
        setPending(true);
        try {
            await firebase.firestore().collection('users').add({
                authId,
                name,
            });
            setSubmitted(true);
        } finally {
            setPending(false);
        }
    };

    // 新規ユーザー登録処理後
    const [list, loading, error] = useCollectionData<UserTypes>(db.collection('users'), { idField: 'docId' });
    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error...</div>;

    // ログイン認証IDと新規登録でアップしたIDが一致する情報を取得
    const createUser = list?.find((user) => user.authId === authId);

    // 編集フォームの初期値はDBのデータで保存
    const initialName = createUser?.name || '';

    // 新規登録後の編集フォーム
    const handleEditFormSubmit = async (event: React.FormEvent) => {
        event.preventDefault();
        setPending(true);
        try {
            if (createUser) {
                await firebase.firestore().collection('users').doc(createUser.docId).update({
                    name: name !== '' ? name : initialName,
                });
                setSubmitted(true);
                window.location.reload();
            }
        } catch (error) {
            console.error('Error updating user:', error);
        } finally {
            setPending(false);
        }
    };

    return (
        <section className={Styles.user}>
            {!createUser ? (
                <div className={Styles.form}>
                    <h2>プロフィール登録</h2>
                    <form onSubmit={handleSubmit(OnSubmit)}>
                        <label>ユーザー名</label>
                        <input
                            {...register('name', { required: true })}
                            className={Styles.input}
                            type="text"
                            name="name"
                            value={name}
                            placeholder="ユーザー名"
                            onChange={(e) => setName(e.target.value)}
                        />
                        <p className={Styles.error}>{errors.name?.type === 'required' && 'お名前が入力されていません'}</p>
                        
                        <button className={Styles.submitBtn} type="submit">登録</button>
                        {pending && 'Pending...'}
                    </form>
                </div>
            ) : (
                <div className={Styles.form}>
                    <h2>プロフィール更新</h2>
                    <form onSubmit={handleEditFormSubmit}>
                        <label>ユーザー名</label>
                        <input
                            className={Styles.input}
                            type="text"
                            name="name"
                            value={name !== '' ? name : initialName}
                            placeholder="ユーザー名"
                            onChange={(e) => setName(e.target.value)}
                        />

                        {submitted && <p className={Styles.update}>更新しました</p>}
                        <button className={Styles.submitBtn} type="submit">更新</button>
                    </form>
                </div>
            )}
        </section>
    );
}