为什么我的子数组没有被正确推送到父数组中？ReactJS

Question

所以我用ReactJS实现了冒泡排序算法。在我的状态下，我有一个由3个对象组成的数组，最初按'num‘属性降序排列。我在屏幕上有一个按钮，单击该按钮可以运行我创建的冒泡排序函数。我希望跟踪冒泡排序的每次迭代，并将其添加到父数组中。然而，在我运行我的冒泡排序函数之后，它在控制台上记录了带有子数组的父数组，但是所有的子数组都显示了排序的顺序，而不是每次迭代。有谁能看到我不理解的地方吗？谢谢。

编辑:更新的代码片段。我已经修复了之前遇到的问题，现在正在记录每一次冒泡排序的迭代。我将每个对象的“compare”属性初始设置为“no”，但希望设置在每次迭代(子数组)中将哪两个对象与“yes”进行比较。我一直没能解决这个问题。每次迭代中的每个对象的compare属性都被设置为“yes”，而不仅仅是被比较的两个对象。有什么想法吗？

编辑:更新代码片段。有一个可行的解决方案。但是，有比多次使用JSON.parse(JSON.stringify())更好的解决方案吗？谢谢。

​

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    array: [
      { index: 0, num: 6, compare: 'no'},
      { index: 1, num: 5, compare: 'no'},
      { index: 2, num: 4, compare: 'no'},
      { index: 3, num: 3, compare: 'no'},
      { index: 4, num: 2, compare: 'no'},
      { index: 5, num: 1, compare: 'no'},
      ]
    }
    this.onBtnClick = this.onBtnClick.bind(this);
  }
 
  onBtnClick() {
		let copy = JSON.parse(JSON.stringify(this.state.array));

    let output = [JSON.parse(JSON.stringify(copy))];
    
  	for(let i = 0; i < copy.length; i++) {
      for (let j = 0; j < copy.length-i-1; j++) {
      	copy.forEach(item => { item.compare = 'no' });
      	copy[j].compare = 'yes';
        copy[j + 1].compare = 'yes';
        if (copy[j].num > copy[j + 1].num) {
      		let temp = copy[j + 1];
        	copy[j + 1] = copy[j];
        	copy[j] = temp;
      	}
        output.push(JSON.parse(JSON.stringify(copy)));
    	}
  	}
    console.log(output);

  }
 
  render() {
    return (
      <div>
        <h2>Test</h2>
        <button type='button' onClick={this.onBtnClick}>Click Me to console log</button>
      </div>
    )
  }
}

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

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

​

Answer 1

您将它记录在两个循环之外，而您应该将它记录在第一个循环内，但在第二个循环之外，以查看每个迭代。

​

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      array: [{
          index: 0,
          num: 3,
          otherProp: 'test'
        },
        {
          index: 1,
          num: 2,
          otherProp: 'test'
        },
        {
          index: 2,
          num: 1,
          otherProp: 'test'
        },
      ]
    }
    this.onBtnClick = this.onBtnClick.bind(this);
  }

  onBtnClick() {
    let copy = JSON.parse(JSON.stringify(this.state.array));
    let newCopy = [copy];
    for (let i = 0; i < copy.length; i++) {
      for (let j = 0; j < copy.length - i - 1; j++) {
        copy[j].otherProp = 'notest';
        if (copy[j].num > copy[j + 1].num) {
          let temp = copy[j + 1];
          copy[j + 1] = copy[j];
          copy[j] = temp;
        }

        newCopy.push(copy);
      }
       console.log(newCopy);
    }
    
  }

  render() {
    return ( <
      div >
      <
      h2 > Test < /h2> <
      button type = 'button'
      onClick = {
        this.onBtnClick
      } > Click Me to console log < /button> <
      /div>
    )
  }
}

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

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

​

Answer 2

数组是js中的引用类型，因此如果您将相同的数组保存在数组中，但在最后将其输出，则最后一个数组将被多次输出，如果您想输出一个历史数组，则应在将其推入“历史”数组时对每个数组进行复制。