React를 사용하여 구성 요소 상태의 배열을 올바르게 업데이트

Question

저는 배열을 사용하여 구성 요소의 상태를 더 잘 처리하는 방법을 배우고 이해하려고합니다. 내가 더 좋은 방법은 직접 (this.state.things.push(thingComp);를) 상태 필드에 push()에있을 것이라고 생각

generateThings =() => { 
    let newThings = []; 
    for (let j = 0; j < this.state.numberOfThings; j++) { 
     const pos = this.generatePosition(1, 1); 
     const thingComp = <Thing key={j} position={pos} />; 
     newThings.push(thingComp); 
    } 
    this.setState({ 
     things: newThings 
    }); 
    }; 

대신의 다음은 내가 나중에 부모 구성 요소의 렌더링 구성 요소를 생성하는 구성 요소의 componentWillMount()에 전화 기능입니다 temp 변수에 저장하는 것이 더 복잡해 보입니다. 하지만 UI 업데이트가 실행되지 않는 것 같아서이를 수행하는 방법이라고 추측합니다. 그러나 확실하지 않습니다.

Answer 1

당신이하고있는 일은 정확합니다.

당신이 setState 전화

, 그것은 다시 쓰게 구성 요소가 발생합니다 React Docs

setState를()에 따라 구성 요소의 상태에 대한 변경 사항을 큐에 넣하고이 구성 요소와 그 아이가 다시 렌더링 할 필요가 반응 이야기 업데이트 됨 상태

결코 this.state를 변경하지 마십시오. 나중에 setState()를 호출하면 이 변이를 바꿀 수 있습니다. this.state가 마치 인 것처럼 취급하십시오.

기존 things 배열/푸시를 업데이트해야하는 경우 : 당신이 원하는 경우

let things = this.state.things.slice(); // make a copy 

//push or do whatever to the array 
things.push(thingComp) 

this.setState({ things: newThings }); 

Answer 2

는 또한, 다른 배열에 밀어 슬라이스하지 않고 상태를 설정할 수 있습니다.

CodeSandbox : https://codesandbox.io/s/jn8w8w34n3

the additional array solution is commented