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

Question

So i am implementing bubblesort algorithm using ReactJS. In my state, i have an array of 3 objects initially in descending order by the 'num' property. I have a button on my screen to click which i want to run the bubblesort function i created. I want to keep track of each iteration of the bubblesort and add it to a parent array. However, after i run my bubblesort function, it console logs the parent array with subarrays but all the subarrays are showing sorted order instead of showing each iteration. Can anyone see what i am not understanding? Thanks.

EDIT: Updated Code Snippet. I have fixed issue i was having and am now logging each iteration of bubblesort. I have the 'compare' property of each object set to 'no' initially but want to set which two are being compared to 'yes' in each iteration (subarray). I haven't been able to solve this. Every objects' compare property in every iteration is getting set to 'yes' instead of just the two being compared. Any ideas?

EDIT: Update Code Snippet. Have a working solution. But is there a better solution than having to JSON.parse(JSON.stringify()) multiple times? Thanks.

 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

You were logging it outside both the loops whereas you should log it inside the first loop but outside second one to see each iteration.

 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 中的引用类型，因此如果您将相同的数组保存在一个数组中，但在最后控制台输出最后一个数组将被多次输出，如果您想输出一个历史数组，您应该制作每个的副本将其推入“历史”数组时的数组