React.js - 프런트 엔드에서 배열을 업데이트하지 않는 Array.unshift()

Question

react-dnd을 사용하여 드래그 앤 드롭을 약간 구현했습니다. 오른쪽 열에서 왼쪽 열을 드래그하면 특정 상태 항목이 활성화됩니다.

드롭하면 pushCard()이 호출되며, 이는 (이름에서 알 수 있듯이) 드래그 한 항목을 활성화 된 상태 배열 인 status_data으로 푸시합니다.

그러나 문제는 status_data.push(itemToPush)이며 배열의 끝에 새 항목을 푸시합니다. 배열의 맨 위에 항목을 푸시 (즉, 배열의 인덱스 0)하고 싶습니다.

status_data.unshift(itemToPush)이 경우 작동하지만 unshift 만 state와 백엔드에 배열을 업데이트하지만, 프런트 엔드에 업데이트 된 array 표시되지 않습니다. 그보다 먼저 드래그 한 것과 동일한 요소를 계속 밀어내는 것입니다.

pushCard

Simple description of problem in a GIF.

:

pushCard(item) { 
    const { status_data } = this.state.template; 
    const itemToPush = { 
     title : item.title || 'CUSTOM', 
     type_id : item.type_id, 
     color : item.color || '#000', 
     type: item.type, 
     require_notes: item.require_notes || false, 
     require_estimate: item.require_estimate || false 
    }; 
    status_data.unshift(itemToPush); 
    this.setState(Object.assign(this.state.template, { status_data })); 
} 

renderActiveStatuses

renderActiveStatuses() { 
    let renderedResult = ''; 
    if (this.state.template.status_data.length < 0) { 
     renderedResult = (<p>No status active in this template.</p>); 
    } else { 
     renderedResult = this.state.template.status_data.map((status, i) => { 
     return (
      <Status deleteStatus={this.deleteStatus} handleStatusUpdate={this.onStatusUpdate} index={i} id={status.id} moveCard={this.moveCard} statusData={status} key={status.id} /> 
     ); 
     }); 
    } 
    return renderedResult; 
} 

renderActiveStatuses은 성분의 render 함수라고한다.

Answer 1

status 객체가된다 itemToPush 여기에 표시되는 속성은 id이고 key은 Status입니다. 대신 key={i}을 사용해 볼 수도 있습니다 (지도 색인을 사용하는 것이 가장 좋은 방법이 아니더라도).

const itemToPush = { 
    id: Math.random().toString(36).substr(2, 16), 
    ... 
} 

을하고 당신이 전에 그랬던 것처럼 지금 status.id를 사용

이 같은 (아마도) 고유 ID를 생성 할 수 있습니다.

수백만 개를 생성 할 경우 위험이 될 경우 더 나은 ID 생성기가 있습니다.

Answer 2

어떨까요? 당신이 당신의 질문에 그랬던 것처럼

this.setState({template: Object.assign({}, this.state.template, { status_data })}); 

원래는 결코 변하지 않는 동안, 당신은 단지 당신의 상태로 의 내용을 할당하는, 그래서 당신의 상태는 같은

state = { 
    template: {status_data: ...}, 
    status_data: ..., 
    ... 
}