import React, { useState, useEffect } from "react";
import { checkRef } from "./firebase";
function Dashboard() {
const [count, setCount] = useState([]);
let hi = [];
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
checkRef.on("value", snapshot => {
let items = snapshot.val();
let newState = [];
for (let tracker in items) {
newState.push({
reason: items[tracker].reason,
teacher: items[tracker].teacher
});
}
setCount({ items: newState });
});
// Update the document title using the browser API
// checkRef.on('value',(snapshot) => {
// console.log(snapshot.val())
// })
}, []);
return (
<div>
{count.items.map(item => {
return <h1>{item.reason}</h1>;
})}
</div>
);
}
export default Dashboard;
我尝试在获取项目后将每个项目作为 h1 返回,但我不断收到错误 × 类型错误:无法读取未定义的属性“map”。我很抱歉我是网络开发新手并正在尝试学习。我花了很多时间却没有任何结果。谢谢
最佳答案
问题出在你的计数初始化上。
对于第一次渲染,您的计数状态变量不包含任何名为 items 的属性。因此它失败了。 您的状态变量仅在首次渲染后执行的 useEffect 之后才获取项目。
根据您的 useeffct 代码,您应该使用以下对象初始化 count 状态变量,
const [count, setCount] = useState({items:[]});
关于javascript - 我不断收到 map 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59871038/