準備介面

firestore可以利用updateDoc()來更新資料

• Add data to Cloud Firestore

首先，先產生一個Update.js，複製註冊(SignUp.js)的內容，記得要改function的名稱

export default function **Update**(props) {

運用在Exam.js裡用過的技巧，將Main.js改成:

import React, { useState } from "react";

import AppMenu from "./AppMenu";
import SignUp from "../account/SignUp";
import SignIn from "../account/SignIn";
import Update from "../account/Update";

export default function Main() {
  const [status, setStatus] = useState("signIn");
  function screen() {
    switch (status) {
      case "signUp":
        return <SignUp setStatus={setStatus} />;
      case "signIn":
        return <SignIn setStatus={setStatus} />;
      case "update":
        return <Update setStatus={setStatus} />;
      default:
        return <SignIn setStatus={setStatus} />;
    }
  }
  return (
    <>
      <AppMenu />
      {**screen()**}
    </>
  );
}

在SignIn.js裡，Main.js的status，透過props存取，狀態有signIn、signUp、update，新增handleUpdate:

  const handleUpdate = function () {
    **props.setStatus("update");**
  };

在這裡，新增一個state變數 (status)，狀態: signedIn跟signedOut

  const [account, setAccount] = useState({ email: "", password: "" });
  const [message, setMessage] = useState("");
  **const [status, setStatus] = useState("signedOut");**

並且在對應的函數中更動status

      setMessage(school + "/" + displayName + "已成功登入");
      **setStatus("signedIn");**

const handleLogout = async function () {
    await signOut(auth);
    setMessage("已登出");
    **setStatus("signedOut");**
  };

      {status === "signedIn" ? (
        <>
          <Button variant="contained" color="primary" onClick={handleLogout}>
            登出
          </Button>
          **<Button variant="outlined" color="primary" onClick={handleUpdate}>
            更新資料
          </Button>**
        </>
      ) : (
        <>
          <Button variant="contained" color="primary" onClick={handleSubmit}>
            登入
          </Button>

          <Button variant="outlined" color="primary" onClick={handleSignUp}>
            我要註冊
          </Button>
        </>
      )}

讀取原資料

執行更新的第一個動作是讀取讀取原本的內容，要記得要讀取Authentication的內容以及在firestore的內容，這些動作前面都已經說明過了。

首先，別忘了Update.js的函數名稱要改: