React-native, componentWillReceiveProps에서 nextProps 값을 제거하는 방법

Question

componentWillReceiveProps()에서 nextProps 데이터를 제거 할 수 있는지 알고 싶습니다.

구성 요소 생성자에서 상태 'msg'를 ''로 설정하여 애니메이션 실행을 차단합니다.

다음으로 내 구성 요소는 "componentWillReceiveProps (nextProp)"함수에서 "msg"를 받고 나중에 nextProp.msg 값이 ''함수와 다르면 새 상태 'msg'= nextProp.msg를 설정하고 애니메이션을 시작합니다.

애니메이션이 끝나면 구성 요소를 새로 고칠 때 원하지 않는 애니메이션이 실행되지 않도록 'msg'를 ''로 다시 설정합니다.

nextProp이 마지막으로 데이터를 보관하므로 불행히도 작동하지 않습니다. 따라서 구성 요소가 새로 고쳐 지더라도 'msg'값이 결코 다시 비어 있지 않으므로 애니메이션을 차단할 수 없습니다.

마지막 전달 된 데이터를 지우는 것이 가능하거나 새 소품을 전달하지 않고 구성 요소가 새로 고침되는 경우 애니메이션 실행을 차단하는 다른 방법이 있습니다.

P. 나는 this.props.msg를 비교할 수 없다! == nextProps.msg와 블럭 애니메이션은 동일한 값을 가진 2 개의 애니메이션을 실행해야하기 때문에 동일하다.

감사합니다. 코드 : nextProps이 구성 요소가 실제 소품을하지 참조를 받게하는 것입니다 소품 단지 정적 사본이기 때문에 당신은 componentWillReceiveProps에 nextProps을 변경할 수 없습니다

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Animated, 
    Easing, 
} from 'react-native'; 

export default class PopUpMsg extends Component{ 

    constructor(){ 
     super(); 
     this.state = { 
      msg:'', 
      bottom: new Animated.Value(-50) 
     } 
    } 
    componentWillReceiveProps(nextProp){ 
     if(nextProp.msg!=='') { 
      this.setState({ 
       msg: nextProp.msg 
      },() => { 
       this.showMsg(); 
      }); 
     } 
    } 

    showMsg(){ 
     if(this.state.msg!='') { 
      Animated.sequence([ 
       Animated.timing(
        this.state.bottom, 
        { 
         toValue: 0, 
         duration: 500 
        }), 
       Animated.delay(1000), 
       Animated.timing(this.state.bottom, 
        { 
         toValue: -50, 
         duration: 500 
        }), 
      ]).start(result => { 
       if (result.finished) { 
        this.setState({ 
         msg:'' 
        }) 
        } 
       }); 
     } 
    } 
    render(){ 

     return (
       <Animated.View style={{ 
        height:50, 
        width:100+'%', 
        backgroundColor: 'rgba(0, 0, 0, 0.5)', 
        alignItems:'center', 
        justifyContent:'center', 
        position:'absolute', 
        bottom:this.state.bottom, 
       }}> 
        <Text style={styles.text}>{this.state.msg}</Text> 
       </Animated.View> 
     ) 
    } 

} 
const styles=StyleSheet.create({ 

    text:{ 
     color:'#fff' 
    } 
}); 
AppRegistry.registerComponent('PopUpMsg',() => PopUpMsg); 

Answer 1

. 이 경우해야 할 일은 메시지를 로컬 구성 요소 상태로 유지하고 메시지를 ""으로 설정하여 setState을 보내거나 Redux 또는 MobX와 같은 상태 컨테이너를 사용하는 경우 메시지를 재설정하는 작업을 전달하는 것입니다 .