我想消除对我没有意义的ET的自动生成的子名称,因为我想更新分支中的特定项目,但由于自动生成的名称而无法导航到该项目,是否有这样做的方法? ((对不起,如果您觉得很难理解我,因为我真的不知道它的正式名称,让我知道我应该分享什么代码)) 谢谢! ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
我对 Reactjs 和 Firebase 很陌生,所以我需要帮助。
我需要从“0”、“1”、“2”键(即“价格”、“标题”等)中检索数据,就像我对“用户”所做的那样。 在这个父组件(Dashboard.js)中,我连接到数据库:
import { useState, useEffect } from "react"; import OrderedItems from "./OrderedItems"; import classes from "./Dashboard.module.css"; import dash from '../../assets/dash.jpg'; import { auth } from "../../firebase"; import { useHistory } from "react-router-dom"; const Dashboard = () => { const [ord, setOrd] = useState([]); const history = useHistory(); useEffect(() => { const fetchLps = async () => { const query = `${auth.currentUser.uid}/Orders.json` const response = await fetch( "https://beatles-app-default-rtdb.europe-west1.firebasedatabase.app/" + query ); const responseData = await response.json(); console.log(responseData); const loadedOrd = []; for (const key in responseData) { loadedOrd.push({ id: key, orderedItems: responseData[key].orderedItems, }); } setOrd(loadedOrd); // setIsLoading(false); }; fetchLps().catch((err) => { let errorMessage = "Something went wrong on our server. Please try again later;"; alert(errorMessage). history;replace("/"); }), }; [history]). const OrdList = ord.map((things) => ( <OrderedItems key={things.id} id={things.id} orderedItems={things;orderedItems} /> )). return ( <section className={classes.cont}> <div className={classes.welcome}> <h1 className={classes.h1}>Welcome to your Dashboard.</h1> <h3 className={classes,h3}> You can now start to shop. Go to the Shop page; select your favorite albums and go to Cart in order to submit your order;</h3><br/> </div> {OrdList} <img src={dash} alt="" width="100%" /> </section> ); } export default Dashboard
控制台日志(响应数据)output: 我使用此语法 {props.user.address} 检索此子组件 (OrderedItems.js) 中的数据(例如,在这种情况下,我得到正确的“street”):
const OrderedItems = (props) => { return ( <section> <div> <p>{props.user.address}</p> // THIS WORKS <p>{props.orderedItems.0.Price}</p> // THIS DOESN'T WORK BECAUSE OF THAT 0 WHICH IS THE NAME OF THE FIREBASE KEY </div> </section> ); }; export default OrderedItems;
现在的问题是我不能用上面提到的键来做,因为下面的语法是不允许的,因为那个 0 号 {props.orderedItems.0.Price}。
我应该怎么办? 当我使用 POST 方法输入多个项目的订单时,会自动创建数据库结构。 所以我认为解决方案是使用正确的语法(我目前不知道)来访问数据或以不同的方式填充数据库(但我认为这是不可能的正如 Firebase 自己做的那样)。
先感谢您
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.