时间戳

首页 > 解决方案 > 从firebase firestore获取数据后如何为状态挂钩赋值

reactjs - 从firebase firestore获取数据后如何为状态挂钩赋值

问题描述

我有两个组件，<OpenShippingInvoice /> <OpenUnit />我正在创建一个生成汽车账单的应用程序。我正在从firestore汽车集合中获取汽车数据，并从用户那里获取底盘号来选择特定汽车，并且我的汽车选择功能成功运行，但我想做另一件事，但我面临着问题。

我的汽车选择功能就像

  const [chasis, setChasis] = useState("");
    
  const addCar = (e) => {
        e.preventDefault();
        async function fetchCar() {
          const request = await db
            .collection("cars")
            .where("chasis", "==", chasis)
            .where("stock", "==", "1")
            .onSnapshot((snapshot) =>
              setCar(snapshot.docs.map((doc) => doc.data()))
            );
    
          return request;
        }
        fetchCar();
    
        // assign the >>>car[0]<<< to >>>vehicle<<< useState
    

      };

我的汽车数据存储在汽车状态中，但同时我想在车辆状态中添加我从数据库中获取的同一辆车

    const [car, setCar] = useState([]);
    const [vehicle, setVehicle] = useState({});

在addCar 函数中从 firestore 获取值后，如何在车辆useState中分配car[0]值 （我使用car[0]的原因是底盘是汽车集合中汽车的唯一标识符，如果底盘仅返回单个结果数字与文档匹配，否则将不返回任何内容）

我的代码链接是代码

如果我的信息不完整，请询问我，如果在给定链接中进行更改会更有帮助

标签： reactjsfirebasegoogle-cloud-firestorereact-hooks

解决方案

你可以用它useEffect来做到这一点。通过添加依赖项，您的 useEffect 将仅在依赖项更改后触发，因此：

useEffect(() => {
  setVehicle(car[0]);
}, [car]);

完成后将设置您vehicle的状态。car[0]setCar(...)

推荐阅读