반응 원시에서 하위 구성 요소의 변경 사항에 상위 구성 요소를 다시 렌더링하는 방법?

Question

다른 구성 요소를 렌더링하는 구성 요소가 있습니다. 하위 구성 요소를 변경하면 주 구성 요소를 다시 렌더링하고 싶습니다. 두 번째 구성 요소에서 onSubmit 아래의 예에서

는 주요 구성 요소에 _onSubmit 트리거하지만 setState는보기

아이디어를 다시 렌더링하지 않는 이유는 무엇입니까?

class MainLayout extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     data: 'no', 
    }; 

    this._onSubmit = this._onSubmit.bind(this); 
    } 

    // this get's triggered by _checkSubmitReady() on the second component 
    _onSubmit(data) { 
    // this state get's set, but this component is not re-rendered 
    // i assume render() should be called here 
    this.setState({data: data}); 
    } 

    render() { 
    return (
     <View><SecondLayout onSubmit={this._onSubmit}/>{this.state.data}</View> 
    ); 
    } 
} 


class SecondLayout extends Component { 
    constructor(props) { 
    super(props); 

    this._checkSubmit = this._checkSubmit.bind(this); 
    } 

    _checkSubmit() { 
    this.props.onSubmit('yes'); 
    } 

    // sub component is mounted, call onSubmit() on parent component 
    componentDidMount() { 
    this._checkSubmit(); 
    } 

    render() { 
    return (
     <View><Text>Nothing here</Text></View> 
    ); 
    } 
} 

Answer 1

시도 :

_onSubmit(data) { 
    this.setState({ data: data },() => { 
    this.forceUpdate(); 
    }); 
} 

아니면 ES5를 사용하는 경우 :

_onSubmit(data) { 
    this.setState({ data: data }, function() { 
    this.forceUpdate(); 
    }.bind(this)); 
}