React Native : 구성 요소와 componentWillMount() 메소드간에 소품 전달

Question

React Native 0.43을 사용하고 있습니다. 나는 ParentComponent과 ChildComponent이라는 두 가지 구성 요소를 가지고 있습니다. 부모로부터 자식 구성 요소로 일부 소품을 전달하고 싶습니다. 나는 부모 구성 요소에서 다음 코드 (요약본)를 사용하고 있습니다 : 다음과 같은

export default class ParentComponent extends Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     latitude: 34.7821, 
    }; 
    } 

    render() { 
    return (
     <View> 
     <ChildComponent latitude={this.state.latitude} /> 
     </View> 
    ); 
    } 

} 

내 하위 구성 요소는 다음과 같습니다 이제

export default class ChildComponent extends Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     latitude: props.latitude, 
    }; 
    } 

    componentWillMount() { 
    console.log('Before Mount: ' + this.state.latitude) 
    } 

    render() { 
    return (
     <Text>{'Mounted: ' + console.log(this.state.latitude)}</Text> 
    ); 
    } 
} 

, 내 콘솔 프로그램은 다음과 같은 결과 :

2:14:12 AM: Before Mount: null 

2:14:12 AM: Mounted: null 

2:14:12 AM: Mounted: 34.7821 

을 이제 내 원래 코드의 componentWillMount()은 명확하게 전달되지 않은 this.state.latitude의 값에 의존하는 웹 서비스에 대한 API 호출을 적어도 첫 번째 렌더링에서가집니다. 두 번째 렌더링에서 this.state.latitude 값을 사용할 수있게되면 render() 함수 만 실행되지만 내 componentWillMount() 함수에서이 값이 필요합니다.

내가 여기서 잘못하고있는 것은 무엇입니까?

Answer 1

이 메서드는 초기 렌더링 직전에 한 번만 실행되기 때문에 componentWillMount에 소품 값을받을 수 없습니다. 첫 번째 렌더링에서 소품이 부모 구성 요소에서 하위 구성 요소로 전달되지 않았기 때문에 하위 구성 요소에서 componentWillReceiveProps 메서드를 사용하여 문제를 해결합니다. 후속 렌더링시 소품을 받고 하위 구성 요소의 원래 상태를 업데이트합니다. 그러면 내 상태 값에 액세스 할 수있게됩니다. 내가 해결하기 위해 사용하는 코드는 다음입니다 :

componentWillReceiveProps(nextProps) { 
     // update original states 
     this.setState({ 
     latitude: nextProps.latitude, 
     }); 
    } 

Answer 2

"this"용어로 소품을 불러야합니다.