React JS:我如何在Firebase中使用创建文档的ID并将其放置在模态框中?

Question

我正在用React JS制作电子商务，并使用Firebase作为后端模拟器。我已经成功地创建了一个订单，它存储了所需的值，并且文档成功地存储在Firebase中:文档模拟了与客户端购买的内容相对应的订单。我想创建一个模态框，它给买家他的订单ID，但是我不能捕获该ID，不知道如何做到这一点，但控制台日志确实给了我ID。

下面是创建文档到Firebase的代码:

const saveOrder = async () => {
const cartFiltered = cart.map(({ id, title, quantity }) => ({ id, title, quantity }));
const orderToSave = {
buyer: buyer,
items: cartFiltered,
total: cartTotal(),
};
console.log(orderToSave);
const db = getFirestore();
const ordersCollection = collection(db, "orders");
const response = await addDoc(ordersCollection, orderToSave);
console.log(response.id);
}

下面是给出ID的模态部分的代码:

<p> ("Your order ID is: {response.id} . Thanks for shopping!") </p>

我得到以下错误:"response is not defined"。

Answer 1

对Firestore的调用第一眼看起来都很好，所以更可能的是您没有使您的response变量可用于UI渲染

要做到这一点，您需要将response存储在状态中，例如通过使用useState钩子设置它:

const [response, setResponse] = useState({ id: "" });
...
const res = await addDoc(ordersCollection, orderToSave)
setResponse(res);
console.log(res.id);