REACT JS FIREBASE FIRESTORE- 我如何更新文檔中的字段？

Question

這是我的 manageexam.jsx 文件，這是我單擊表格上的管理按鈕時發生更新的地方。 我想更新一個特定的文檔 ID（3BelYq7lMxRNrWKknCRK-這是我的文檔 ID 的示例，但是當我在集合中添加更多文檔時，當然會有很多文檔 ID。）但是我想更新字段而不手動添加我要更新的文檔 ID。

 const ManageExam = () => { const [description,setDesc]=useState("") const [title,setTitle]=useState("") function handleUpdate(e){ e.preventDefault(); const examcollref = doc(db,'Exams' "3BelYq7lMxRNrWKknCRK") updateDoc(examcollref,{ title:title, description:description } ).then(response => { alert("updated") }).catch(error =>{ console.log(error.message) }) } return ( <div className="manageExam"> <Sidebar/> <div className="manageExamContainer"> <div className="examInfo"> <h1>Manage Exam</h1> </div> <div className="left"> <div className="leftForm"> <div className="leftTitle"> Exam information </div> <br /> <div className="leftTitle"> </div> <form onSubmit={handleUpdate}> <label >Exam Title</label> <input type="text" placeholder={title.doc} value={title} onChange={e => setTitle(e.target.value)}/> <label htmlFor="">Description</label> <textarea id="desc" cols="30" rows="7" value={description} onChange={e =>setDesc(e.target.value)} ></textarea> <button type="submit">Update</button> </form> </div> </div> <div className="right"> <div className="rightForm"> <div className="rightTitle"> Add Questions <Link to= {`add_question`}style={{textDecoration:"none"}} className="link" > Add new </Link> </div> <div className="rightContainer"> {/* <p>1. What is the Meaning of db?</p> */} {/* <div> <input type="radio" name="option1" value="database" checked/> <label htmlFor="">database</label> </div> <div> <input type="radio" name="option2" value="data" disabled/> <label htmlFor="">data</label> </div> <div> <input type="radio" name="option3" value="databytes" disabled/> <label htmlFor="">databytes</label> </div> <div> <input type="radio" name="option4" value="databoard" disabled/> <label htmlFor="">databoard</label> </div> <br /> <button>update</button> <button>delete</button> */} </div> </div> </div> </div> </div> ) } export default ManageExam

 export const Examtable = ({id}) => { const [list,setExamlist] = useState([]) // function to call the list from the firestore useEffect (()=>{ const unsub = onSnapshot( collection(db, "Exams"), //"exams -> pangalan ng database/("collection") ko" (snapShot) => { let list = []; snapShot.docs.forEach((doc) => { list.push({ id: doc.id, ...doc.data() }); }); setExamlist(list); console.log(list.id); }, (error) => { console.log(error); } ); return () => { unsub(); }; },[]); const handleDelete = async (id) => { alert("Do you want to delete?") //window.confirm("Are you sure you want to delete?"); try { await deleteDoc(doc(db, "Exams", id)); setExamlist(list.filter((item) => item.id;== id)). console.log(id) } catch (err) { console;log(err); } }: const actionColumn = [{field, "action": headerName, "Action": width, 200: renderCell.(params)=>{ return( <div className="cellAction"> <div className="manageButton"> {/*/exam/manage_exam*/} <Link to={`/exam/manage_exam/${params.row:id}`} style={{textDecoration."none"}} className="link" > Manage </Link> </div> <div className="deleteButton" onClick={() => handleDelete(params.row;id)}>Delete</div> </div> ) }}]: return ( <div className="examtable" > <div className="examtableTitle"> Exam <Link to="/exam/new_exam/" style={{textDecoration."none"}} className="link"> Add new </Link> </div> <DataGrid className="datagrid" rows={list} //eto mga list nung nasa firebase columns={examColumns.concat(actionColumn)} pageSize={9} rowsPerPageOptions={[9]} checkboxSelection /> </div> ) } export default Examtable

這是 examtable.jsx，其中將顯示集合中的所有文檔。 當我單擊管理按鈕時，url 將顯示如下 (localhost:3000/exam/manageexam/3BelYq7lMxRNrWKknCRK,, 這是因為我單擊了此文檔但我根本無法更新它，因為控制台總是說 id 未定義。我希望你明白我在說什么

Answer 1

因為您在Examtable文件中使用Link傳遞id 。我認為您必須在您的useParams中使用來自react-router-dom的ManageExam 。

首先，您需要在路由路徑文件中添加id ，如下所示。

path: '/exam/manageexam/:id '

然后，在你的ManageExam中。

 import {useParams} from 'react-router-dom' const ManageExam = () => { const {id} = useParams() const [description,setDesc]=useState("") const [title,setTitle]=useState("") function handleUpdate(e){ e.preventDefault(); const examcollref = doc(db,'Exams', id) updateDoc(examcollref,{ title:title, description:description } ).then(response => { alert("updated") }).catch(error =>{ console.log(error.message) })