TextFieldの初期値にfirestoreから取得したデータを格納したい

Question

前提・実現したいこと

React×TypeScript×Firebaseで飲食店に対してチップを払うことのできるアプリを開発しています。
現在店舗情報を更新できる機能を実装中です。Firestoreからデータを取得して、TextFieldの初期値としたいのですが、useEffectのタイミングの関係で初期値が空のままです。この問題に２日ほど悩んだ結果原因究明に至らずこちらで質問させていただきます。

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

const Header = styled.div`
  padding: 15px 0;
  background-color: white;
  position: relative;
  a {
    position: absolute;
    top: 15px;
    left: 15px;
    color: black;
  }
  h1 {
    text-align: center;
    font-size: 20px;
  }
`;

const Update: React.FC = () => {
  const user = useSelector(selectUser);
  const dispatch = useDispatch();
  const [shopInfo, setShopInfo] = useState({
    shopid: "",
    shopname: "",
    shopimage: "",
    shopaddress: "",
    shopphonenumber: "",
  });
  console.log(shopInfo.shopname);
  const [shopName, setShopName] = useState(shopInfo.shopname);
  const [shopImage, setShopImage] = useState(shopInfo.shopimage);
  const [shopAddress, setShopAddress] = useState(shopInfo.shopaddress);
  const [shopPhoneNumber, setShopPhoneNumber] = useState(
    shopInfo.shopphonenumber
  );

  useEffect(() => {
    const unSub = auth.onAuthStateChanged((authUser) => {
      //onAuthStateChangedはfirebaseの認証関係に変化があった時に毎回呼び出される関数。（例）新しくユーザーがログインした時、ログアウトした時、ユーザーが変わった時
      if (authUser) {
        //変化後のユーザー情報がauthUserに入っている
        dispatch(
          login({
            uid: authUser.uid,
            photoUrl: authUser.photoURL,
            displayName: authUser.displayName,
          })
        );
      } else {
        dispatch(logout());
      }
    });
    return () => {
      unSub();
    };
  }, [dispatch]);
  useEffect(() => {
    let unmounted = false;
    const querySnapshot = async () => {
      if (!unmounted) {
        await db
          .collection("ShopList")
          .where("shopid", "==", user.uid)
          .get()
          .then(async (snapshot) => {
            await snapshot.docs.map((doc) => {
              if (doc.exists) {
                setShopInfo({
                  shopid: doc.data().shopid,
                  shopname: doc.data().shopname,
                  shopimage: doc.data().shopimage,
                  shopaddress: doc.data().shopadress,
                  shopphonenumber: doc.data().shopphonenumber,
                });
              }
            });
            console.log("成功");
          })
          .catch((e) => {
            console.error();
          });
      }
    };
    querySnapshot();
    const cleanup = () => {
      unmounted = true;
    };
    return cleanup;
  }, []);

  return (
    <div>
      <Header>
        <h1>TIPPAY</h1>
        <Link to="/">
          <HomeIcon />
        </Link>
      </Header>
      <TextField
        id="outlined-basic"
        label="店名"
        variant="outlined"
        value={shopName}
        onChange={(
          e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
        ) => {
          setShopName(e.target.value);
        }}
      />
      <div>
        <IconButton>
          <label>
            <PanoramaIcon
              fontSize="large"
              // className={shopImage ? classes.addIconLoaded : classes.addIcon}
            />
            <input
              // className={classes.hiddenIcon}
              type="file"
            />
          </label>
        </IconButton>
      </div>
      <TextField
        id="outlined-basic"
        label="住所"
        variant="outlined"
        value={shopAddress}
        onChange={(
          e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
        ) => {
          setShopAddress(e.target.value);
        }}
      />
      <TextField
        id="outlined-basic"
        label="電話番号"
        variant="outlined"
        value={shopPhoneNumber}
        onChange={(
          e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
        ) => {
          setShopPhoneNumber(e.target.value);
        }}
      />
    </div>
  );
};

export default Update;

試したこと

・useEffectを非同期処理した
・console.logで調査した ⇒ shopInfo.shopnameには値が入っているが、shopNameは空となっている

どんなに調べても分かりませんでした。どうかよろしくお願いいたします。

Comments

[hoshi-takanori]

Firestore からデータを取得してる間はローディング中の表示にして、入力欄を表示しないとか、入力できないようにするのはいかがでしょう？

[kobayashiteppei]

ご回答本当にありがとうございます！！！
ローディング中は非表示にしてみたのですが、結果は変わりませんでした。

Answer 1

useStateの引数は初回に呼ばれるだけなので useState(shopInfo.shopname) は shopInfo.shopname が変わっても反映されません

shopInfo.shopname を使いまわせばいいように見えますが、どうしてもuseStateを分けたいのであればfirestoreからデータを取得した時にsetShopName(doc.data().shopname)を行うようにするか、次のようにshopInfo.shopnameが変化した時に呼ばれるuseEffectを用意すればいいと思います

useEffect(() => {
  setShopName(shopInfo.shopname)
}, [shopInfo.shopname])

Comments

[kobayashiteppei]

本当にありがとうございます！解決いたしました！