如何在react中显示firestore数据库中的项目
如何在react中显示firestore数据库中的项目
提问于 2021-02-24 06:54:11
我正在尝试从我的firestore数据库中呈现一个产品列表。我可以获取项目，但不能显示它们。如何在react中显示来自firebase的数据？
这是我的控制台日志显示的错误消息：
react-dom.development.js:13231未捕获错误:对象作为React子级无效(找到:具有键{描述，名称，数量}的对象)。如果您打算呈现一个子级集合，请改用数组。
import Firebase from "../FireBase";
import { useEffect, useState } from "react";
const TechP= () => {
const [techList, setTechList] = useState([]);
const getTech = async () => {
try {
const list = [];
var snapshot = await Firebase.firestore().collection("Tech").get();
snapshot.forEach((doc) => {
list.push(doc.data());
});
setTechList([...list]);
console.log(list);
} catch (e) {
alert('error');
}
};
//Call when component is rendered
useEffect(() => {
getTech();
}, []);
return (
<div>
<p>working</p>
<form>here{techList}</form>
</div>
)
}
export default TechP;回答 2
Stack Overflow用户
回答已采纳
发布于 2021-02-24 07:04:31
要在React中呈现多个JSX元素，可以使用.map()方法遍历数组并返回单个元素。
因为techList是一个数组，所以您需要遍历列表并呈现其中的每一个。
<form>here{techList && techList.length && techList.map(listItem => listItem)}
要阅读有关主题的更多信息并考虑使用key，请访问https://reactjs.org/docs/lists-and-keys.html
Stack Overflow用户
发布于 2021-02-24 07:21:34
您只需对techList执行.map()操作
import Firebase from "../FireBase";
import { useEffect, useState } from "react";
const mockData = ['a', 'b', 'c']
const TechP = () => {
const [techList, setTechList] = useState([]);
const getTech = async () => {
try {
const list = [];
var snapshot = await Firebase.firestore().collection("Tech").get();
snapshot.forEach((doc) => {
list.push(doc.data());
});
setTechList([...list]);
console.log(list);
} catch (e) {
alert("error");
}
};
//Call when component is rendered
useEffect(() => {
setTechList(mockData) // this changed just for demonstration reasons
}, []);
return (
<div>
<p>working</p>
<form>here
{techList.map((val, key) => {
return (
<div key={key}>
{val}
</div>
)
})}
</form>
</div>
);
};
export default TechP;有关更多信息，请查看map() method docs
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66342267
复制相关文章
相似问题
腾讯云开发者
