Я продолжаю получать карту не является функцией

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 после получения элемента, но я получаю ошибку × TypeError: Невозможно прочитать свойство 'map' undefined. Я извиняюсь, я новичок в веб-разработке и пытаюсь учиться. Я провел много времени безрезультатно. спасибо

Answer 1

Проблема заключается в инициализации счетчика.

Для самого первого рендеринга ваша переменная состояния счетчика не содержит какого-либо свойства с именем items. следовательно, это терпит неудачу. ваша переменная состояния получает элементы prepery только после useEffect, которое выполняется после первого рендеринга.

в зависимости от вашего кода useeffct, вы должны инициализировать переменную count count с помощью объекта, подобного follwing,

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

Answer 2

Еще один способ решить вашу проблему - просто сделать это:

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

Answer 3

Похоже, что useEffect не вызывает функцию обратного вызова (которую вы определили).
Вы можете попробовать инициализировать count.items как массив
Или убедиться, что useEffect вызывает функция обратного вызова