Javascript 使用react显示多维数组/矩阵

我最近开始做出反应，我被一个矩阵问题困住了。列和行作为用户的输入，应该显示一个矩阵作为输出。这是我的密码：

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      array1 : [],
      array2 : [],
      col1: null,
      row1 : null,

    }
    this.handleCol1Change = this.handleCol1Change.bind(this);
    this.handleRow1Change = this.handleRow1Change.bind(this);
  }

  handleCol1Change(e){
    this.setState({
      col1 : e.target.value
    })
  }

  handleRow1Change(e){
    this.setState({
      row1 : e.target.value
    })
  }

  createarray1(){
    for(let i=0; i < this.state.row1; i++){
      let row = []
      this.state.array1.push(row);
      for(let j=0; j < this.state.col1; j++){
        let col = "1"
        this.state.array1.push(col);
      }
      return this.state.array1
    }
  }

  handleSubmit(){
    this.createarray1()
  }

  render() {
    return (
      <div>
        <h3>Enter Dimensions</h3>
        <form>
          <h1>Matrix 1</h1>
          <input placeholder="Columns" onChange={this.handleCol1Change}/>
          <input placeholder="Rows" onChange={this.handleRow1Change}/>

          <button type="submit" onSubmit={this.handleSubmit.bind(this)}>Enter Dimensions</button>
        </form>
        {console.log("array",this.state.array1,"array2",this.state.array2)}
      </div>
    );
  }
} 

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
阵列1:[]，
阵列2:[]，
col1:null，
第1行：空，
}
this.handleCol1Change=this.handleCol1Change.bind（this）；
this.handleRow1Change=this.handleRow1Change.bind（this）；
}
HandleCol1变更（e）{
这是我的国家({
col1:e.target.value
})
}
把手箭头1变更（e）{
这是我的国家({
第1行：e.target.value
})
}
createarray1（）{
for（设i=0；i

我认为错误在于我的创建阵列逻辑。在

console.log

上，它显示我的数组没有存储任何内容。你知道我做错了什么吗？

---

TIA

调用

this.state.array1.push时，您直接修改状态。您应该使用
setState（）
。如果您只是在推送一个状态值，那么您可以使用
setState（{array1:[…this.state.array1，row]}）
如果createArray（）方法中存在一些问题，则需要构建行，然后将其添加到数组中。另外，正如@ageoff所说，您需要调用
setState
，而不是直接使用
this.state
。这是您的代码更改，以保持它与您当前拥有的代码相似-但它应该可以工作

createarray1
现在只返回数组，而
handleSubmit
函数设置状态

编辑：我现在更改了
createarray1
，使其成为纯函数，您可以传入rowCount和colCount。现在，您可以检查
createarray1
是否独立工作：

  createarray1(rowCount, colCount){
    let myarr = [];
    for(let i=0; i < rowCount; i++){
      let row = []
      for(let j=0; j < colCount; j++){
        let col = "1"
        row.push(col);
      }
      myarr.push(row);
    }
    return myarr;
  }

  handleSubmit(){
    this.setState({
      array1: this.createarray1(this.state.row1, this.state.col1)
    });
  }

createarray1（行计数、列计数）{
设myarr=[]；
for（设i=0；i

下面是它自己的函数，以显示它正在创建正确的数组：


让createarray1=函数（行计数、列计数）{
设myarr=[]；
for（设i=0；iconsole.log（createarray1（2,3））我给出了一个答案，但对于如何构建阵列，我有点困惑。也许您可以将您完成的数组的输出作为示例？