ReactJS 소품을 업데이트하는 것이 좋습니다

Question

새 데이터로 내 페이지를로드하도록 소품을 변경하는 것이 좋습니다. 내가 JSON에서 HTML 페이지를로드하는 데 필요한 요구 사항을 가지고, 예를 들어 내가 위의 JSON 스키마에서 HTML 페이지를로드 할 수있어

formSchema:{ 
"label": "Step 1", 
"action": "Next", 
    "Fields":[ 
     { 
      "type":"text", 
      "label":"First Name", 
      "name":"fname" 
      "value":"Abraham" 
     } 
    ] 
} 

아래에 주어진 있지만, 사용자가 클릭하면 거기에 의지 제출 '버튼을 ajax 호출을 통해로드 된 새로운 스키마. 이제 새 스키마를 내 감속기에 전달하면 newSchema로 직접 대체 할 수 있습니까? 소품을 변경하면 조언 할 수없는 것으로 들었습니다. 이 경우 소품 만 새 데이터로 업데이트하려면 어떻게합니까?

return Object.assign(...formSchema, action.formSchema); 

내가 다음 상태가 내가 동일한 데이터 세트를로드하더라도 대신 배열의 객체로 표시됩니다 콘솔에 표시 내 감속기에 다음과 같이 내가 할 경우. 새로운 소품보기를 업데이트 반응에

Answer 1

당신은 componentWillReceiveProps() 방법을 사용할 수 있습니다. 탑재 부품 새로운 소품을 받기 전에

componentWillReceiveProps()이 호출된다. 소품 변경 (예 : 재설정)에 대한 응답으로 상태를 업데이트해야하는 경우 this.props와 nextProps를 비교하고이 메서드에서 this.setState()를 사용하여 상태 전이를 수행 할 수 있습니다.

React는 소품이 변경되지 않은 경우에도이 메서드를 호출 할 수 있으므로 변경 내용 만 처리하려는 경우 현재 값과 다음 값을 비교해야합니다. 부모 구성 요소에서 구성 요소를 다시 렌더링 할 때이 문제가 발생할 수 있습니다.

React는 탑재 중에 초기 소품이있는 구성 요소 WillReceiveProps를 호출하지 않습니다. 구성 요소의 일부가 업데이트 될 수있는 경우에만이 메서드를 호출합니다. this.setState를 호출하면 일반적으로 componentWillReceiveProps가 트리거되지 않습니다.

그것은 다음과 같습니다

class YourComponent extends Component{ 
    constructor(props) { 
    this.state = { 
    message: props.message // initial prop 
    } 
    } 
    componentWillReceiveProps(nextProps){ 
    this.setState({message: nextProps.message} // updated prop 
    } 
    render() { 
    return (
     <div><h1>{this.state.message}</h1></div> 
    ) 
    } 
} 

참고 :이 코드에서 대신 새로운 소품 (nextProps)를 사용하는 소품을 돌연변이/업데이트하고 상태를 업데이트하지 않는 너의 전망.