时间戳

首页 > 解决方案 > 扩展运算符更新不需要的元素，同时在数组中添加新元素（ReactJs）

javascript - 扩展运算符更新不需要的元素，同时在数组中添加新元素（ReactJs）

问题描述

我正在构建一个矩阵计算器作为一个反应应用程序。我已经实现了一种方法，可以显示用户使用的每个数学运算的历史记录，例如加法、减法等。问题是每次调用新运算并且当前矩阵比以前的矩阵发生变化时，历史记录都会更新它的满足于新的价值观。

您可以在以下位置测试应用程序：MatrixCalculator(Github)

矩阵本身是一个类，其中定义了一个二维数组及其大小

    this.matrice = [];

    for(let i=0;i<arraySize;i++){
        this.matrice[i]= [];
        for(let j=0;j<arraySize;j++){
            this.matrice[i][j]=0;
        }
    }

    this.size = arraySize;

然后将数据引入矩阵，我使用了一种形式：

<input
  type='text'               
  placeholder='0'
  onChange={this.handleChange.bind(this, i, j)}
  key={j}              
/>

功能：

handleChange = (i,j, event)=> {
    event.preventDefault();
    let x = event.target.value;
    this.state.matriceA.setValue(i, j, value);
}

通过使用此函数，我将值插入到矩阵中。

现在，每次请求操作时，使用的矩阵、运算符和计算结果的矩阵都存储在一个数组中。这是执行此操作的函数：

var list = [
        {
            matrixA: matriceA,
            operator: semn,
            matrixB: matriceB,
            matrixC: matriceC //result
        }
    ]

    this.setState({
        results: [...list, ...this.state.results]
    })

因此，这些值现在存储在this.state.results最后，我映射整个数组并显示元素：

{this.props.rezultate.map((item, index) => {
 ///useless stuff

})}

但预计不会出现显示的元素，这是一个示例： 第一步 第二步

要查看我在说什么，请查看页面底部

如您所见，最后一个操作也更新了以前的操作，即使它不应该这样做。

我不知道在这个阶段我做错了什么，所以我期待着听到你的解决方案。谢谢！

标签： javascriptarraysreactjs

解决方案

推荐阅读