React嵌套的.map()不返回任何元素？

Question

我正在尝试以特定的网格格式呈现一个嵌套的图像数组，其中列的数量被传递给组件。

我有一个充满图像src的2D数组，我首先通过outerArr映射来创建列(这是预期的)。但是当我试图通过内部元素映射时，什么都不会返回。我玩过显式或隐式回报，但似乎无法做到这一点。而且，在检查元素时，我可以看到列元素中没有呈现任何内容。

如果我只映射了数组()的一个维度，我就可以呈现jsx，但如果它是嵌套的，则不能。嵌套映射中是否有我缺少的元素？

let NFTPayload = [
  NFT1,
  NFT2,
  NFT3,
  NFT4,
  NFT1,
  NFT2,
  NFT3,
  NFT4,
  NFT1,
  NFT2,
  NFT3,
  NFT4,
  NFT1,
  NFT2,
  NFT3,
  NFT4,
  NFT1,
  NFT2,
  NFT3,
];
const NFTGallery = (props) => {
  // state is set to an empty array, ready to store the NFT payload
  const [NFTPayload, setNFTPayload] = useState([]);
  const itemCount = NFTPayload.length - 1;
  const rowCount = Math.round(itemCount / props.columnCount);
  let nftArr = [...Array(props.columnCount)].map((e) => Array(rowCount));
  console.log('Row count is ', rowCount);
  console.log('Item length count is ', itemCount);
  console.log('Column count is ', props.columnCount);
  //const rowCount = itemCount /;

  useEffect(() => {
    setNFTPayload(smartContractArrayOfNFTs);
  }, []);

  useEffect(() => {
    NFTPayload.reverse();
    for (let i = 0; i < props.columnCount; i++) {
      let outerCounter = 0;
      for (let j = 0; j < rowCount; j++) {
        nftArr[i][j] = 
        NFTPayload[outerCounter];
        outerCounter++;
      }
    }
  }, [NFTPayload]);

  return (
    <>
      <section className={styling.testContainer}>
        {nftArr && 
        nftArr.map((ele, outerIdx) => (
          <div key={outerIdx} className={styling.testColumn}>
            {
              ele.map((item, innerIdx) => (
                return(
                <img src={item}></img>
                )
              ))
            }
          </div>
        ))}
      </section>
    </>
  );
};

export default NFTGallery;

Answer 1

您看到的问题是，每当依赖项更改时，您都会再次更改它，从而使用useEffect触发无限循环。难道不可能从deps中删除NFTPayload并仅在挂载上计算吗？