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

Posted 2023-03-25

【中文标题】仅更改动态输入字段中的一个特定值

【英文标题】：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！ ????。您可以在下面将其作为自我回答发布，而不是在您的问题中发布解决方案。这样系统就知道有答案，未来的访问者也更容易找到（并可能投票赞成）您的答案。

【参考方案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。