javascript - 我不断收到 map 不是函数

Question

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”。我很抱歉我是网络开发新手并正在尝试学习。我花了很多时间却没有任何结果。谢谢

Answer 1

问题出在你的计数初始化上。

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

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

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