Рендеринг реагирующего компонента с использованием массива при обновлении состояния

Question

Я новичок в React и изучаю несколько новых вещей: a. Может ли кто-нибудь объяснить мне, почему компонент «деки» не будет отображаться на моем экране (и я получаю «нет колоды, чтобы показать» в соответствии с моим кодом), когда я использую массив в 1 против 2. Обратите внимание, что на данный момент мои колоды В массиве всего 1 колода. б. Оказывается, когда я вызываю функцию для рендеринга, она как-то визуализируется как нулевая изначально, но это не тот случай с непосредственным возвратом одного элемента из массива, как в моем втором кодовом блоке. Кто-нибудь может объяснить, на что похож этот функциональный компонент GameDecks () и как я могу решить эту проблему? Спасибо!

1.

const GameDecks = ({ deck: { decks, loading }, getAllDecks }) => {
  useEffect(() => {
    getAllDecks();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [decks]);
  const loadDecks = () => {
    var allDecks = [];
    if (decks) {
      decks.forEach((item, i) => {
        allDecks.push(
          <div key={decks && decks[0]._id} className="card-container">
            <img className="card-reg" src={hiddencard} alt="No file" />{" "}
            <div>
              {" "}
              <i className="fab fa-creative-commons-share"></i>{" "}
              <i className="fas fa-trash-alt"></i>
            </div>
          </div>
        );
      });

      return allDecks;
    } else return <p> No decks to show </p>;
  };
  return loading && decks === null ? (
    <Spinner />
  ) : (
    <Fragment>
      <div className="cardgallery">{loadDecks()}</div>
    </Fragment>
  );
};

2.

const GameDecks = ({ deck: { decks, loading }, getAllDecks }) => {
  useEffect(() => {
    getAllDecks();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [decks]);

  return loading && decks === null ? (
    <Spinner />
  ) : (
    <Fragment>
      <div className="cardgallery">
  <div key={decks && decks[0]._id} className="card-container">
            <img className="card-reg" src={hiddencard} alt="No file" />{" "}
            <div>
              {" "}
              <i className="fab fa-creative-commons-share"></i>{" "}
              <i className="fas fa-trash-alt"></i>
            </div>
          </div>
     </div>
    </Fragment>
  );
};