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

【问题标题】：how to assign value to a state hooks after fetching data from firebase firestore从firebase firestore获取数据后如何为状态挂钩赋值
【发布时间】：2021-02-20 14:12:46
【问题描述】：

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

我的汽车选择功能就像

  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
    

      };

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

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

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

我的代码链接是Code

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

【问题讨论】：

标签： reactjs firebase google-cloud-firestore react-hooks

【解决方案1】：

您可以使用useEffect 来执行此操作。通过添加依赖，你的 useEffect 只会在依赖改变后触发，所以：

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

在setCar(...) 完成后，会将vehicle 设置为car[0] 状态。

【讨论】：