在ReactJS中嵌套数组

Question

我启动了一个新的React项目。

我创建了导入的图像：

    import Tip1 from "./img/Tips1.png";
    import Tip2 from "./img/Tips2.png";
    import Tip22 from "./img/Tips2-2.png";
...

我将它们放入数组中：

const TIP1 = [{ img: Tip1 }];
const TIP2 = [{ img: Tip2 }, { img: Tip22 }, { img: Tip222 }, { img: Tip2222 }];
const TIP3 = [{ img: Tip3 }, { img: Tip31 }, { img: Tip32 }, { img: Tip33 }];
const TIP4 = [{ img: Tip4 }, { img: Tip42 }];

创建额外的模式，当我们点击图片时弹出。

我创建了一个函数，使用.map逐个显示这些数组。

    const Tips = () => {
      const [isOpen, setIsOpen] = useState(false);
      const [selectedImageData, setImageData] = useState({ img: "" });
    
      const onImageClicked = (imageData) => {
        setImageData(imageData);
        setIsOpen(true);
      };

     //Unique ID
      const getUID = () => {
        return Math.ceil((Math.random() * 10000))
      }
    
      return (
        <>
          <div className="mt-5 mb-3">
            <h2> TIP #1 </h2>{" "}
          </div>
    
          {TIP1.map((imageData) => {
            return (
              <div className="card tips--card mt-5 mb-5 me-5 ms-5 ms-auto me-auto" key={getUID()}>
                <img
                  src={imageData.img}
                  alt="Vocab1"
                  className="card-img-top tips--img"
                  onClick={() => onImageClicked(imageData)}
                />
                <div className="card-body"></div>
              </div>
            );
          })}
    
          <div className="row ms-auto me-auto">
            <div className="mt-5 mb-3">
              <h2> TIP #2 </h2>{" "}
            </div>
            {TIP2.map((imageData) => {
              return (
                <div className="card tips--card mt-5 mb-5 me-5 ms-5 ms-auto me-auto" key={getUID()}>
                  <img
                    src={imageData.img}
                    alt="Vocab1"
                    className="card-img-top tips--img"
                    onClick={() => onImageClicked(imageData)}
                  />
                  <div className="card-body"></div>
                </div>
              );
            })}

    ...

在函数的末尾，我添加了Modal：

...
      {isOpen && (
        //  bind the selected image data state to a data prop on Modal
        <Modal
          // data ={isOpen }
          image={selectedImageData.img}
          //  close the modal
          setIsOpen={setIsOpen}
        />
      )}
    </>
  );
};

结果

它可以工作，但是它根本不具有可伸缩性，而且用这么多代码看起来很傻。

我的计划是使用额外的数组创建一个嵌套循环：

const TIPS = [
  { TIP: TIP2 },
  { TIP: TIP3 },
  { TIP: TIP4 },
  { TIP: TIP5 },
  { TIP: TIP6 },
  { TIP: TIP7 },
  { TIP: TIP8 },
  { TIP: TIP9 },
];

这就是我坚持的地方。到目前为止，我最好的方法是创建另一张地图，但它并没有接近解决方案。

我的问题：如何创建一个嵌套循环来显示数组数组中的图像？

Answer 1

这是个句法错误。基本上，我没有意识到我需要在第二个.map中引用之前的.map，并且我假设它会自动看到它。

{TIPS.map((TIPDATA) => {
        return (
          <div class="container">
<div className="row mt-5">
<h2>STEP #{ counter ++ }</h2>
            {TIPDATA.TIP.map((imageData) => {
              return (
             
                <div className=" card tips--card mt-5 mb-5 me-5 ms-5 ms-auto me-auto" key={getUID()}>
        
             <img
            src={imageData.img}
            alt="Vocab1"
            className="card-img-top tips--img"
            onClick={() => onImageClicked(imageData)}
            key={getUID()}
          />
             </div>
      
              );
              
            }

          
            )
          }
          

</div>
</div>

   
      
        
        );
      })}

Answer 2

我知道你想要什么，你已经在正确的轨道上，你所需要做的就是打两次电话给map。

  {TIP.map((TIPRow, i) => {
    // this is each row
    return (
      <div key={"row" + i}>
        {TIPRow.map(imageData => {
          // this is the image as in your code
        }}
      </div>
    )
  }}

正如您所说的，它是嵌套的，您可以将div替换为您想要的任何其他html结构，例如。tr，或li.现在就看你的了。

注意:挑战是如何处理每个括号，[({，所以如果这是第一次，只需写慢一点，例如。只尝试通过打印一行来使第一个循环工作，然后再在第二个循环上工作。否则，支架的水平可能会花费你一天;)