React : 배열이 처음부터 올바른 순서로 렌더링되지 않습니다.

Question

배열이 처음 렌더링 될 때 올바른 순서로 표시되지만, 변경된 경우 렌더링 된 순서는 동일하게 유지됩니다. 예를 들어

:

On the console (the current order, correct): 
    3 
    1 
    2 
    4 

Rendered as DOM (the original order, incorrect): 
    1 
    2 
    3 
    4 

이 올바른 순서로 렌더링하는 데 실패하는 이유는 어떤 생각 :에

construct() { 

    this.state = { 
     test_array: [1,2,3,4] 
    } 

    let self = this; 

    setTimeout(function(){ 
     self.scramble(); 
    }, 5000); 
} 


scramble() { 
    this.state.test_array = [3,1,2,4]; 
    this.setState(self.state); 
} 

render() { 

    this.state.test_array.forEach(function(item){ 
     console.log(item); 
    }); 

    return (
     <div> 

      {this.state.test_array} 

     </div> 
    ); 
} 

결과?

Answer 1

매우 가까웠습니다. 여기에 내가 그것을 해결하기 위해 변경 몇 가지이다 :

1. construct 당신은 항상 생성자의 첫 번째 라인으로 super()를 호출 할 필요가 constructor
2. 해야한다. (당신은 정말 그것이 객체 지향 일이 이것에 대해 걱정할 필요가 없습니다, 당신이 궁금 경우 구글)
3. 사용 "화살표 기능"대신 "키워드 기능"또는 .bind(this)을 변경 컨텍스트
을에서 this을 방지하기 위해
4. 수정하지 마십시오 this.state; 당신이 여기

class OrderThing extends React.Component { 
 
    constructor() { 
 
    super() 
 

 
    this.state = { 
 
     test_array: [1,2,3,4] 
 
    } 
 

 
    setTimeout(() => { 
 
     this.scramble(); 
 
    }, 5000); 
 
    } 
 

 

 
    scramble() { 
 
    this.setState({ 
 
     test_array: [3,1,2,4] 
 
    }); 
 
    } 
 

 
    render() { 
 
    this.state.test_array.forEach(function(item){ 
 
     console.log(item); 
 
    }); 
 

 
    return (
 
     <div> 
 
     {this.state.test_array} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
const div = document.createElement('div') 
 
document.body.appendChild(div) 
 
ReactDOM.render(<OrderThing />, div)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

몇 가지 제안 사항을 변경하려는 경우 항상 this.setState를 호출합니다. 모든의

먼저, JS에는 construct() 없지만, constructor()있다.

둘째, 당신은 항상 다음과 같이 생성자에 인수로 소품 슈퍼 메소드를 호출해야합니다

constructor(props) { 
    super(props); 
    ... 
} 

마지막으로 만 setState() 방법을 사용하여 개발자가 높은 상태를 수정하는 것이 좋습니다 반응한다. 스크램블 방법을 다시 작성해야합니다.

scramble() { 
    this.setState({test_array: [3,1,2,4]}); 
} 

이 변경 사항은 약간의 도움이됩니다.