reactjs - Firestore 更新；单击编辑按钮时，字段应填充在 ReactJS 的输入字段中

Question

Firestore 更新；单击编辑按钮时，字段应填充在输入字段中，我们可以更新字段，更新字段后应从输入中删除..请任何人帮助我解决这个问题。添加和删​​除按钮没有问题，下面是我的代码

import React, { useState, useEffect } from "react";
import { db } from "../Firebase";
import { v4 as uuidv4 } from "uuid";

function FirestoreCrud() {
  const [myData, setMyData] = useState([]);
  const [vendor, setVendor] = useState("");
  const [vendorId, setVendorId] = useState("");
  const [name, setName] = useState("");
  const [loading, setLoading] = useState(false);


  //REALTIME GET FUNCTION
  function getData() {
    setLoading(true);
    db.collection("User Details").onSnapshot((querySnapshot) => {
      const items = [];
      querySnapshot.forEach((doc) => {
        items.push(doc.data());
      });
      setMyData(items);
      setLoading(false);
    });
  }

  useEffect(() => {
    getData();
  }, []);

  // ADD FUNCTION
  function addVendor(newSchool) {
    db.collection("User Details")
      .doc(newSchool.id)
      .set(newSchool)
      .catch((err) => {
        console.error(err);
      });
    alert("You have added a user");
    setVendor("");
    setVendorId("");
    setName("");
  }

  //DELETE FUNCTION
  function deleteSchool(school) {
    db.collection("User Details")
      .doc(school.id)
      .delete()
      .catch((err) => {
        console.error(err);
      });
  }

  // EDIT FUNCTION
  function editSchool(updatedSchool) {
    setLoading();
    db.collection("User Details")
      .doc(updatedSchool.id)
      .update(updatedSchool)
      .catch((err) => {
        console.error(err);
      });
  }

  return (
    <div className="container">
      <h4>Vendor Details</h4>
      <div className="inputBox">
        <h6>Add New</h6>
        <input
          className="my-2"
          type="text"
          value={vendor}
          onChange={(e) => setVendor(e.target.value)}
          placeholder="User Name"
          required
          style={{ width: "400px", height: "40px", borderRadius: "5px" }}
        />
        <input
          className="my-2 mx-2"
          type="text"
          value={vendorId}
          onChange={(e) => setVendorId(e.target.value)}
          placeholder="User Id"
          required
          style={{ width: "400px", height: "40px", borderRadius: "5px" }}
        />

        <input
          className="my-2"
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Full Name"
          required
          style={{ width: "400px", height: "40px", borderRadius: "5px" }}
        />

        <button
          className="btn btn-dark"
          onClick={() =>
            addVendor({
              vendor,
              vendorId,
              name,
              id: uuidv4(),
            })
          }
        >
          Submit
        </button>
      </div>
      <hr />
      {loading ? <h3>Loading...</h3> : null}
      {myData.map((dt) => [
        <div
          className="my-3"
          id="myid"
          style={{ border: "2px solid", borderRadius: "5px" }}
          key={dt.id}
        >
          <b>Vendor Name :</b> {dt.vendor} <br />
          <b>Vendor Id :</b> {dt.vendorId}
          <br />
          <b>Person Name :</b> {dt.name}
          <div>
            <button
              className="btn btn-danger mx-2 my-2"
              onClick={() => deleteSchool(dt)}
            >
              Delete
            </button>
            <button
              className="btn btn-info"
              onClick={() =>
                editSchool({
                  vendor,
                  vendorId,
                  name,
                  id: dt.id,
                })
              }
            >
              Edit
            </button>
          </div>
        </div>,
      ])}
    </div>
  );
}
export default FirestoreCrud;

标签： reactjsfirebasegoogle-cloud-firestore