仅更改动态输入字段中的一个特定值答案

【问题标题】：Change only one specific value from dynamic input field仅更改动态输入字段中的一个特定值
【发布时间】：2021-12-27 03:18:12
【问题描述】：

我需要一些帮助。

所以我有：

 data.map( (doc) => { 
      return (
         <div>
             <div> {doc.name}</div>
             <div> {doc.age}</div>
         </div>
   )
})

这会将 Firebase Firestore 中的一些数据迭代到网页中。

然后有一个输入字段可以更改年龄。

const [age, setAge] = useState(1);

const handleSubmitAge = async () => {
   const ageRef = doc(db, "user", "docID")
   await updateDoc(ageRef, {
         age : age
     });
}

.....

<div>
     <TextField
        value={age}
        onChange={ e => setAge(e.target.value)}
     />
     <Button onChange={handleSubmitAge}>
        Submit Age
     </Button>
</div

如果我想更改 doc.age，我该怎么做？如果我只是像上面那样写，那么如果有 10 个名字，那么所有名字都会有相同的年龄。

如何在该“年龄”输入字段中引用“docID”，以便仅更新一个特定年龄的特定人员（姓名）？

【问题讨论】：

如果您只想更新一个特定文档，您需要知道该文档的 ID 并将其传递到您现在传递硬编码字符串 "docID" 的位置。您知道要更新的文档的 ID 吗？
@FrankvanPuffelen 啊，好的。我想我现在用 setData(querySnapshot.docs.map((doc) => ({...doc.data(), id:doc.id}) 做到了。我可以不时访问文档 ID将其传递给 handleSubmitAge(id)。现在只需将更新后的值传递给 handleSubmitAge(id, newAge)。我现在将尝试传递该值。非常感谢 Frank van Puffelen 先生。
很高兴看到您自己解决了这个问题，Vincentius！ ????。您可以在下面将其作为自我回答发布，而不是在您的问题中发布解决方案。这样系统就知道有答案，未来的访问者也更容易找到（并可能投票赞成）您的答案。

标签： javascript firebase input google-cloud-firestore dynamic

【解决方案1】：

解决方案：

感谢 Frank van Puffelen 先生。

首先，我需要访问 data.map( (doc) => ... ) 中每个文档的文档 ID。当我们从 Firestore 获取数据时，我们可以更早地这样做

async () => {
            const q = query(collection(db, "collectionName"), where("category", "==", `${some condition here}`));
            const querySnapshot = await getDocs(q);
                querySnapshot.forEach((doc) => {
                setData(querySnapshot.docs.map((doc) => ({...doc.data(), id:doc.id})))
                })
        };

id:doc.id 给了我们文档 id。还要感谢 PedroTech 和 Maksim Ivanov 的 youtube 教程展示了如何获取此文档 ID。

【讨论】：