时间戳

首页 > 解决方案 > 为什么我的子数组没有被正确推入父数组？反应JS

javascript - 为什么我的子数组没有被正确推入父数组？反应JS

问题描述

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

编辑：更新的代码片段。我已经解决了我遇到的问题，现在正在记录bubblesort的每次迭代。我最初将每个对象的“比较”属性设置为“否”，但想在每次迭代（子数组）中将哪两个对象与“是”进行比较。我一直无法解决这个问题。每次迭代中每个对象的比较属性都设置为“是”，而不仅仅是被比较的两个。有任何想法吗？

编辑：更新代码片段。有一个可行的解决方案。但是有没有比多次 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>

标签： javascriptreactjs

解决方案

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

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>

推荐阅读