在Reactjs中渲染每个数组项？

Question

尝试渲染我的generateSeats 函数中的每个项目，但我目前只渲染一个座位。我知道我的第一个 func 应该返回一个数组，但在屏幕上渲染数组中的每个项目让我感到困惑。

const generateSeats = () => {
    let numRow = 8;
    let numColumn = 3;
    let rowArray = [];
    let start = 1;
    let reachnine = false;

    for(let i=0;i<numRow;i++) {
        let columnArray = [];
        for(let j=0;j<numColumn;j++) {
            let seatObject = {
                number : start,
                taken : Boolean(Math.round(Math.random())),
                selected: false, 
            }
            columnArray.push(seatObject);
            start++;
        }
        if(i==3){
            numColumn += 2
        }
        if(numColumn <9 && !reachnine) {
            numColumn +=2;
        } else {
            reachnine=true;
            numColumn -= 2;
        }
        rowArray.push(columnArray)
    }
    return rowArray
}

const PurchaseTicket = () => {
  return (
    <div className='w-full h-full  overflow-auto scrollbar-hide'>
        <div className='w-full h-full flex flex-1 bg-black'>
            <div className='bg-white w-[12px] h-[12px] rounded-t-[10px]'>{generateSeats}       
            </div>
        </div>
    </div>
  )

Answer 1

也许这样的东西对你有用？我使用地图函数来获取每一行，然后使用相同的方法来获取每个座位：

return (
    <div className="w-full h-full  overflow-auto scrollbar-hide">
      <div className="w-full h-full flex flex-1 bg-black">
        {generateSeats().map((row) => {
          return row.map((seat) => {
            return (
              <div className="bg-white w-[12px] h-[12px] rounded-t-[10px]">
                {/*Here you can access every value by seat.<value>*/}
                {seat.number}
              </div>
            );
          });
        })}
      </div>
    </div>
  );