초기 구성 요소 상태로 Redux 사용

Question

현재 선택된 항목의 이름을 편집하는 데 사용되는 구성 요소 ("name"및 "selected"속성 포함)의 초기 상태로 Redux를 사용하고 있습니다. 저장 버튼을 클릭했을 때만 Redux 전역 상태를 업데이트하려고하기 때문에 로컬 초기 상태로 사용됩니다 (아직 구현되지 않았습니다).

이

<TextField 
    id={"name"} 
    value={this.state.item.name} 
    onChange={e => this.updateName(e.target.value)} 
/> 

updateName() 함수는 다음과 같습니다 : 기능을 렌더링 내

constructor(props) { 
    super(props) 
    this.state = { 
     item: this.props.item 
    } 
} 

는 편집 이름 입력이 들어 여기

updateName = (value) => { 
    var newItem = this.state.item 
    newItem.name = value 
    this.setState({item: newItem}) 
} 

, 나는 항목을 선택할 수 있습니다,의 디폴트 값 선택한 항목의 이름에 따라 입력이 변경됩니다 (항목을 선택할 때 Redux의 상태가 업데이트되므로 입력의 구성 요소 및 텍스트 상태도 업데이트 됨). 모든 것이 의도적으로 작동합니다.

입력 내용을 쓰면 작성된 텍스트가 변경되지만 항목을 선택하면 입력 내용이 더 이상 업데이트되지 않습니다 (텍스트를 입력하기 전에 Redux에서 선택된 항목의 이름을 따라야 함).).

this.props.item에 대한 참조 (및 이후 Redux 업데이트)가 this.setState()로 구성 요소 상태를 업데이트하자마자 손실 되었기 때문입니까? 그러나이 문제를 어떻게 해결할 수 있습니까?

Answer 1

constructor은 입력이 통제 된 구성 요소이며 사용자가 주관하는 명령이지만 한 번만 호출된다는 점에 유의하십시오.

componentWillReceiveProps 메서드에서 redux 상태를 기준으로하여 구성 요소 상태를 업데이트하면됩니다.

참고하시기 바랍니다 : 소품을 사용하여 상태를 업데이트하는 것은 안티 패턴으로 간주됩니다.