时间戳

首页 > 解决方案 > 使用 .map() 反应的未定义变量

javascript - 使用 .map() 反应的未定义变量

问题描述

我正在重新访问一个旧的学校课程项目，但我不断收到一个错误，因为未定义的网格变量用于生成我的网格。

我想循环获取我想将属性存储在一个名为网格的数组中的行和列的数量。然后我想用 .map() 显示数组中行和列的节点。

不过，我对做出反应还很陌生，似乎无法找到为什么我不能在 render() 中访问网格数组。

class PathfinderGrid extends Component {
  constructor(props) {
    super(props)
    this.state = {
      grid: [],
    };
  }
  

  componentDidMount() {
    const grid = createGrid();
    this.setState({ grid });
    //console.log(this.state.grid)
  }

  render() {
    return (
      <div>
        {grid.map((grid) => {
          <div>{ grid }</div>
        })}
      </div >
    );
  }
}



const createGrid = () => {
  let grid = [];
  for (let row = 0; row < 15; row++) {
    let currentRow = [];
    for (let col = 0; col < 50; col++) {
      currentRow.push();
    }
    grid.push(currentRow);
    //console.log(grid);

  }
  return grid;
};

export default PathfinderGrid;

标签： javascripthtmlreactjs

解决方案

由于您使用的是类组件，我相信您需要编写

 {this.state.grid.map((grid) => {
   return <div>{ grid }</div>
 })}

推荐阅读