Question

我是React的新手，正在学习一些新东西：一种。有人可以向我解释为什么当我在数组中使用数组时，为什么“ deck”组件不能在我的屏幕上呈现（并且根据我的代码我没有“可以显示甲板”）？ 1 vs2。请注意，到目前为止，我的decks数组只有1个deck。 b。事实证明，当我调用一个函数进行渲染时，它最初会以某种方式渲染为null，但直接从数组中返回单个项目却不是这种情况，就像我的第二个代码块一样。谁能解释这个功能组件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>
  );
};

状态更新时使用数组渲染组件

0 个答案: