从 firestore 获取数据作为 useState 的初始值，它给了我 udefined 值

Question

我想将从 firestore 获取的数据设置为 useState 的初始值，但它给了我未定义的值，因为我想更新用户配置文件并且我不知道用户编辑或更新哪个属性，因为我想保留的其他属性用户相同，只更改已编辑的用户。

我试过这段代码，但它给了我这个错误：Uncaught (in promise) FirebaseError: Function updateDoc() called with invalid data。 不支持的字段值：未定义（在文档 users/DQjpLaKYVgVuH9TeqNomIEyuMJB2 的字段姓氏中找到）

import React, { useState, useEffect } from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
import { doc, onSnapshot, updateDoc } from "firebase/firestore";
import { auth, db } from '../../firebase';


export default function Form({ setEditForm }) {
  const [user, setUser] = useState([]);
  const [currentUser] = useAuthState(auth);
  
  // fetching user information from firestore
  useEffect(() => {
    const getUser = async () => {
      const docRef = await doc(db, 'users', currentUser.uid)
      try {
        await onSnapshot(docRef, (doc) => {
          setUser({
            ...doc.data(), id: doc.id
          })
        })

      } catch (e) {
        console.log(e)
      }

    }
    getUser()
  }, [])

  const [name, setName] = useState(user.firstName);
  const [surname, setSurname] = useState(user.surname);
    const [biography, setBiography] = useState(user.biography);
  const [location, setLocation] = useState(user.location);

  // updating user's profile
  const updateProfile = async (e) => {
    e.preventDefault();
    const docRef = doc(db, 'users', currentUser.uid);
    await updateDoc(docRef, {
      firstName: name,
      surname: surname,
      biography: biography,
      location: location
    })
  }

  console.log(user)
  return (
    <form
      onSubmit={updateProfile}
      className="flex flex-col w-4/6 lg:w-3/6"
    >
      <div className="lg:flex lg:flex-row lg:justify-between lg:gap-6">
        <div className="lg:flex lg:flex-col lg:w-1/2">
          <h2 className="text-left text-[#4699C2] font-bold py-2">Name: </h2>
          <div className="border border-gray-300 rounded-md">
            <input
              type="text"
              placeholder={name}
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="w-full py-2 px-4 opacity-50 focus:opacity-100"
            />
          </div>
        </div>

        <div className="lg:flex lg:flex-col lg:w-1/2">
          <h2 className="text-left text-[#4699C2] font-bold py-2">Surname: </h2>
          <div className="border border-gray-300 rounded-md">
            <input
              type="text"
              placeholder={surname}
              value={surname}
              onChange={(e) => setSurname(e.target.value)}
              className="opacity-50 px-4 focus:opacity-100 w-full py-2"
            />
          </div>
        </div>
      </div>

      <h2 className="text-left text-[#4699C2] font-bold py-2">Biograhpy: </h2>
      <div className="border border-gray-300 rounded-md">
        <textarea
          onChange={(e) => setBiography(e.target.value)}
          className="opacity-50 px-4 focus:opacity-100 w-full py-4"
        >
          {biography}
        </textarea>
      </div>

      <h2 className="text-left text-[#4699C2] font-bold py-2">Location: </h2>
      <div className="border border-gray-300 rounded-md">
        <input
          placeholder={location}
          value={location}
          onChange={(e) => setLocation(e.target.value)}
          className="opacity-50 px-4 focus:opacity-100 w-full py-2"
        />
      </div>

      <div className="flex flex-row justify-center py-4">
        <input
          type="submit"
          value="SAVE"
          className="bg-[#4699C2] text-white fong-bold w-24 py-3 rounded-full mx-4 font-bold hover:bg-[#026FC2] hover:shadow-lg focus:bg-[#026FC2] focus:shadow-lg focus:outline-none focus:ring-0 active:bg-[#026FC2] active:shadow-lg transition duration-150 ease-in-out"
        />
        <input
          onClick={() => {
            setEditForm(false);
          }}
          type="reset"
          value="CANCEL"
          className="bg-[#4699C2] cursor-pointer lg:bg-white hover:bg-[#026FC2] hover:text-white hover:shadow-lg focus:bg-[#026FC2] focus:shadow-lg focus:outline-none focus:ring-0 focus:text-white active:bg-[#026FC2] active:shadow-lg transition duration-150 ease-in-out text-white lg:text-[#4699C2] lg:border lg:border-[#4699C2] fong-bold w-24 py-3 rounded-full font-bold"
        />
      </div>
    </form>
  );
}

Answer 1

作为社区维基回答这个问题，正如@yograjtandel 所建议的那样，不是将响应存储在一个单一的 state 中，而是首先将所有状态（如姓名、传记、姓氏等）声明为 null。然后在useState中设置所有状态 ex。 setName(doc.data().Name) 。