reactjs中的循环和渲染

我的应用程序就像一个餐厅，里面有桌子、椅子、植物等。把它想象成瓷砖。所以不管怎样， 以上是我的样本数据。shopF确定将制作的最大瓷砖（更像x和y坐标）。家具包括其位置、家具类型等

我的问题是，我想渲染一个用作瓷砖的元素，并在循环该元素时，确定家具是否存在于x和y坐标中。我正在考虑嵌套for循环

const user1 = [
  {
    id: 1,
    orderDetails: [
      {
        id: 1,
        custFN: 'Jon',
        custLN: 'Smith',
        serverDetails:
        [{
          id: 123,
          sFN: 'Barack',
          sLN: 'Obama',
        }],
        orderFinish: false,
      }
    ],
    shopF: [
      {
        maxPX: 10,
        maxPY: 10,
      }
    ],
    furniture: [
      {
        id: 1,
        type: 'table',
        pX: 2,
        pY: 0,
        label: 'VIP Table',
        color: 'green',
      },
      {
        id: 2,
        type: 'table',
        pX: 2,
        pY: 1,
        label: 'VIP Table',
        color: 'green',
      },
      {
        id: 3,
        type: 'chair',
        pX: 1,
        pY: 0,
        label: 'VIP Chair',
        color: 'brown',
      },
      {
        id: 4,
        type: 'chair',
        pX: 1,
        pY: 1,
        label: 'VIP Chair',
        color: 'pink',
      },
    ],
  }
];

返回(
{
//对于循环y
//如果家具等于y，则同时渲染家具，否则仅渲染空瓷砖
//对于循环x
//如果家具等于x，则同时渲染家具，否则仅渲染空瓷砖
}
);

我尝试过使用地图功能，但我不知道如何确切地做到这一点

下图是“瓷砖”的布局及其x和y坐标。

---

我将这样做，首先使用以下方法创建一个Tilemap：

constbuildtilemap=（数据、大小、大小）=>{
让arr=newarray（sizeY）.fill（null）.map（（）=>
新数组（sizeX）.fill（null）.map（（）=>({
键入：“空”//chn将此设置为适合您的需要
}))
);
用于（常量数据项）{
控制台日志（项目）；
arr[item.posY][item.posX]=项目；
}
返回arr；
};

然后渲染一行，该行将包含一个简单的

div

样式集

display:flex

，其中包含如下项目的映射：

const RenderRow=（{data}）=>{
返回(
{data.map（e=>(
))}
);
};
const Tiles=（{data}）=>{
返回(
{data.type}
);
};

---

以下是我的方法，首先使用以下方法创建一个Tilemap：

constbuildtilemap=（数据、大小、大小）=>{
让arr=newarray（sizeY）.fill（null）.map（（）=>
新数组（sizeX）.fill（null）.map（（）=>({
键入：“空”//chn将此设置为适合您的需要
}))
);
用于（常量数据项）{
控制台日志（项目）；
arr[item.posY][item.posX]=项目；
}
返回arr；
};

然后渲染一行，该行将包含一个简单的

div

样式集

display:flex

，其中包含如下项目的映射：

const RenderRow=（{data}）=>{
返回(
{data.map（e=>(
))}
);
};
const Tiles=（{data}）=>{
返回(
{data.type}
);
};

这是我的建议

return (
      <React.Fragment>
          {
            // For loop y
             // If furniture is equal to y then render also furniture else just render empty tiles
              // For loop x
               // If furniture is equal to x then render also furniture else just render empty tiles


          }
      </React.Fragment>
    );