反应 firestore 子集合

Question

我怎样才能得到客户的汽车清单

clients:
w21rffa3:
name: Johny
phone: 123123
cars:
fn1jnr12:
brand: AUDi
model: a6
number: 24f1
dsdasgf122:
brand: AUDi
model: a3
number: 62s14

我的代码

const ref = firestore().collection('clients');
const [clientsList, setClientsList] = useState([]);
useEffect(() => {
  return ref.onSnapshot(clientsSnapshot => {
    const clients = [];
    const cars = [];
    clientsSnapshot.forEach(client => {
      const carsRef = ref.doc(client.id).collection('cars').onSnapshot(carsSnapshot => {
        carsSnapshot.forEach(car => {
          if (car.data().brand.length > 0) {
            const {
              brand,
              model,
              number
            } = car.data();
            cars.push({
              id: car.id,
              brand,
              model,
              number,
            });
          }
        });
        //Good result`

        console.log('After forEach: ', cars);
      });
      //Bad result
      console.log('After snapshot: ', cars);
      const {
        name,
        phone
      } = client.data();
      clients.push({
        id: client.id,
        name,
        phone,
        cars: cars,
      });
    });
    setClientsList(clients);
  });
}, []);

客户汽车清单

Answer 1

您面临的错误是由于误用/误解了基于异步/回调的函数的工作方式。 正如我在评论中所说 - good result和bad result - 由于 onSnapshot 是async ， bad result脚本在good result之前执行，并且你将回调 function 传递给它，当数据从 firebase 可用时执行，所以有点“晚于”代码的 rest。

现在谈谈可以做什么。 代码有点棘手，我没有真正测试它，所以如果有任何问题 - 请告诉我。

const [clientsList, setClientsList] = useState([]);

useEffect(() => {
  let carsUnsubscribeFns = [];
  const clientUnsubscribeFn = ref.onSnapshot((clientsSnapshot) => {
    // Reset everything and stop previously created listeners for Cars
    setClientsList([]);
    carsUnsubscribeFns.forEach((x) => x());
    carsUnsubscribeFns = [];

    clientsSnapshot.forEach((c) => {
      const { name, phone } = c.data();
      
      const client = { id: c.id, name, phone };
      // In case you dont want to use optional chaining, 
      // remove the const client = ... line above
      // and uncomment the line below
      // but optional chaining is prefered anyway
      // const client = { id: c.id, name, phone, cars: [] };
      
      const carsUnsubscribeFn = ref
        .doc(client.id)
        .collection("cars")
        .onSnapshot((carsSnapshot) => {
          // Mutate the Client object directly
          client.cars = carsSnapshot.docs
            .map((x) => ({ id: x.id, ...x.data() }))
            .filter((x) => x.brand?.length > 0);
          // mark ClientsList as updated to force a rerender
          // due to we mutated one of the entities inside
          setClientsList((curr) => [...curr]);
        });
      carsUnsubscribeFns.push(carsUnsubscribeFn);
      setClientsList((curr) => {
        curr.push(client);
        return [...curr];
      });
    });

    // clean-up function returned from hook to stop all the listeners
    return () => {
      [clientUnsubscribeFn, ...carsUnsubscribeFns].forEach((x) => x());
    };
  });
}, []);