我不断得到地图不是一个功能答案

【问题标题】：I keep getting map is not a function我不断得到地图不是一个功能
【发布时间】：2020-01-23 13:28:40
【问题描述】：


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 返回，但我一直收到错误 × TypeError：无法读取未定义的属性“地图”。我apoligize我是新的网络开发和尝试学习。我花了很多时间都没有结果。谢谢

【问题讨论】：

你控制台 api 响应数据了吗？

标签： javascript reactjs firebase firebase-realtime-database

【解决方案1】：

问题在于您的计数初始化。

对于第一次渲染，您的 count 状态变量不包含任何名为 items 的属性。因此它失败了。您的状态变量仅在第一次渲染后执行的 useEffect 之后才获取项目。

根据您的 useeffct 代码，您应该使用如下对象初始化计数状态变量，

  const [count, setCount] = useState({items:[]});

【讨论】：

【解决方案2】：

听起来useEffect 没有调用回调函数（您定义的那个）。
您可以尝试将 count.items 初始化为数组
或者确保useEffect调用回调函数

【讨论】：

【解决方案3】：

解决问题的另一种方法是这样做：

{
  count && count.items && count.items.map( item => {
    // do something with the item
  })
}

【讨论】：