Question

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',
      },
    ],
  }
];

我的应用程序就像一个用餐区，那里有桌子，椅子，植物等。可以将其视为瓷砖。所以无论如何，以上是我的示例数据。 shopF确定将要制作的最大图块（更像x和y坐标）。家具由位置，家具类型等组成。

我的问题是我想渲染一个将用作图块的元素，并在使其循环时，确定家具是否存在于x和y坐标中。我在想嵌套循环。

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>
    );

我尝试使用地图功能，但我不知道该怎么做。

下面的图像是'tiles'的布局及其x和y坐标。

Answer 1

这就是我要怎么做，首先使用此方法创建一个Tilemap：

const BuildTilesMap = (data, sizeX, sizeY) => {
  let arr = new Array(sizeY).fill(null).map(() =>
    new Array(sizeX).fill(null).map(() => ({
      type: "empty" // chnage this to fit your need
    }))
  );

  for (const item of data) {
    console.log(item);
    arr[item.posY][item.posX] = item;
  }

  return arr;
};

然后渲染一个行，该行将具有一个简单的div，其样式设置为display: flex，并带有如下所示的项映射：

const RenderRow = ({ data }) => {
  return (
    <div style={{ display: "flex" }}>
      {data.map(e => (
        <Tiles data={e} />
      ))}
    </div>
  );
};

const Tiles = ({ data }) => {
  return (
    <div style={{ height: 80, width: 80, border: "1px solid #555" }}>
      {data.type}
    </div>
  );
};

这里是codesandbox

在React.js中循环和渲染

1 个答案: