구성 요소를 업데이트하는 대신 삭제하십시오.

Question

나는 상황을 설명하려고합니다. 나는 상태 객체의 배열이 구성 요소를 가지고 구성 요소는 우리가 이런 일이 objects.So 사람에 따라 다른 구성 요소를 렌더링 : 우리는 결과는 같을 것이다 상태에서 3 개 항목이 경우에 따라서

class MainComponent extends React.Component { 
    render(){ 
    return this.state.items.map((item) => { 
     return <AnotherComponent {...item} />) 
    } 
    } 
} 

을 이 :

<MainComponent> 
    <AnotherComponent item1 /> 
    <AnotherComponent item2 /> 
    <AnotherComponent item3 /> 
</MainComponent> 

이제 상태를 조작 해 봅시다. 우리는 상태에서 마지막 요소를 제거 할 경우, 구성 요소는이로 다시 렌더링됩니다

<MainComponent> 
    <AnotherComponent item1 /> // nothing happens to this one 
    <AnotherComponent item2 /> // and to this one 
         // this element is deleted 
</MainComponent> 

을하지만 우리는 상태에서 첫 번째 요소를 제거하는 경우, 구성 요소는이로 다시 렌더링됩니다

<MainComponent> 
    <AnotherComponent item2 /> 
    <AnotherComponent item3 /> 
</MainComponent> 

항목 2은 실제로 항목 2 구성 요소가 아닙니다. 상품 1 상품 2 소품으로 다시 표시되는 상품 번호입니다. 그리고이 행동은 내 앱의 논리를 엉망으로 만든다. 이 문제를 피할 수있는 방법이 있습니까? 의 기본 로직 AnotherComponent이 componentDidMount 메소드에 있기 때문에 구성 요소가 실제로 필요한 방식으로 업데이트하지 않습니다. AnotherComponent 구성 요소가 채팅 할 수있는 채팅 앱이 있다고 상상해보십시오. componentDidMount 메서드가 실행되면 원격 서버에 연결되어 새 메시지를 가져옵니다. 이 논리는 한 번만 수행되기 때문에 상태 조작의 마지막 예제에서 설명한 것처럼 응용 프로그램 상태가 변경되면 (item1 대화방을 상태에서 삭제하고 응용 프로그램에서 item2를 열 때) 실제로 item1 대화방이 표시됩니다 방금 폐쇄 됐어. (이것은 내가 직면 한 문제와 매우 유사하다)

내가 쓴 것을 이해하기를 희망한다. 고맙습니다.

Answer 1

동적 항목을 사용할 수 있습니다. 이 경우

class MainComponent extends React.Component { 
    render(){ 
    return this.state.items.map((item) => { 
     return <AnotherComponent key={item.id} {...item} />) 
    } 
    } 
} 

, 나는 항목이 키 입력 자녀를 조정합니다 반작용 할 때 각 개체에게

을 구별하는 ID를 가지고 있다고 가정, 그것은 키 자식이 (대신 다시 정렬 될 수 있도록 할 것이다 clobbered) 또는 파괴 (재사용 대신).

키는 항상 배열의 각 구성 요소의 컨테이너 HTML이 아닌 배열의 구성 요소에 직접 제공되어야합니다.

참고 :이 키 프로퍼티를 필요로하는 이유 Dynamic Children