使用反应显示多维数组/矩阵答案

【问题标题】：Display Multi Dimensional Arrays/Matrix using react使用反应显示多维数组/矩阵
【发布时间】：2019-02-10 21:31:25
【问题描述】：

我最近开始使用 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>
    );
  }
}

我相信问题出在我的创建数组逻辑上。在console.log 上，它显示我的数组没有存储任何东西。关于我做错了什么的任何想法？ TIA

【问题讨论】：

我给出了答案，但我对您希望如何构建数组感到有些困惑。也许你可以把你完成的数组是什么样子的示例输出？

标签： javascript reactjs matrix multidimensional-array

【解决方案1】：

当您调用this.state.array1.push 时，您正在直接修改状态。你应该使用setState()。如果你只是推到一个状态值，那么你可以使用setState({array1: [...this.state.array1, row]})

【讨论】：

【解决方案2】：

您在 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)
    });
  }

这是它自己的函数，表明它正在创建正确的数组：

let createarray1 = function(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;
}
console.log(createarray1(2,3));

【讨论】：