Question

我想知道是否可以删除componentWillReceiveProps（）中的nextProps数据。

在组件构造函数中，我设置了状态＆＃39; msg＆＃39;到＆＃39;＆＃39;阻止动画运行。

接下来，我的组件收到道具＆＃34; msg＆＃34;在函数＆＃34; componentWillReceiveProps（nextProp）＆＃34;如果值nextProp.msg不同于＆＃39;＆＃39;功能设置一个新的状态＆＃39; msg＆＃39; = nextProp.msg并启动动画。

动画完成后，我设置状态＆＃39; msg＆＃39;到＆＃39;＆＃39;再次防止组件刷新时不需要的动画运行。

不幸的是，它不起作用，因为nextProp保留了最后传递的数据。所以即使组件只是刷新我也不能阻止动画，因为＆＃39; msg＆＃39;价值永远不会空。

所以有可能清除最后传递的数据，或者是否有任何其他方法来阻止动画运行，如果组件只是刷新而不传递新的道具。

P.S。我无法比较this.props.msg！== nextProps.msg和块动画如果是相同的，因为有时我需要运行具有相同值的2个动画。

谢谢。代码：

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

您无法更改nextProps中的componentWillReceiveProps，因为nextProps只是您的组件即将接收的道具的静态副本，而不是对实际道具的引用。在这种情况下，您应该做的是将邮件保持在本地组件状态，并发送setState将邮件设置为""，或者如果您使用状态容器（如Redux）或MobX，发送一个将重置您的消息的动作。

React-native，如何从componentWillReceiveProps

1 个答案: