Question

我试图通过依赖 setState() 更改在 JSX 中呈现 10 x 10 复选框输入表单，因为我打算让用户能够更改维数以呈现 20x20 或 15x15 之类的内容.我试过 map(items => {}) 但它不起作用。

VALUE

Answer 1

主要问题是您在映射函数 {} 中使用了大括号，这意味着您应该明确地编写返回值，即 return arrY.map...，目前您什么都不返回 (undefined) .或者您可以省略大括号以隐式返回 yCells 映射：

function MyComponent() {
  const [xCells, setXCells] = React.useState(10)
  const [yCells, setYCells] = React.useState(10)

  let arrX = Array.apply(null, { length: xCells }).map(Number.call, Number)
  let arrY = Array.apply(null, { length: yCells }).map(Number.call, Number)

  return (
    <div className="RestaurantSeating">
      {arrX.map(x => 
        <div key={x} className="row">
          {arrY.map(y =>
            <input key={y} type="checkbox" />
          )}
        </div>
      )}
    </div>
  )
}

ReactDOM.render(<MyComponent />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

另一种方法是：

{new Array(xCells).fill(0).map(_ => {
    return (<div>
        {new Array(yCells).fill(0).map(_ => {
            return <input type="checkbox" />
        })}
    </div>)
})}

function Test(){
  const [xCells, setXCells] = React.useState(10);
  const [yCells, setYCells] = React.useState(10);
  return (
    <div className="RestaurantSeating">
      {' '}
      {new Array(xCells).fill(0).map(_ => {
        return (<div>
          {new Array(yCells).fill(0).map(_ => {
            return <input type="checkbox" />
          })}
        </div>)
      })}{' '}
    </div>
  )
}

ReactDOM.render(<Test />, document.querySelector("#app"))

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="app"></div>

ReactJS：不依赖数组或对象的 2D 嵌套循环渲染元素

2 个答案: