Reactjs React native，如何从componentWillReceiveProps中删除nextProps值

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

在组件构造函数中，我将状态“msg”设置为“”以阻止动画运行

接下来，我的组件在函数“componentWillReceiveProps（nextProp）”中接收道具“msg”，如果值nextProp.msg不同于“”函数，则稍后设置新状态“msg”=nextProp.msg并启动动画

动画完成后，我将状态“msg”再次设置为“”，以防止在组件刷新时运行不需要的动画

不幸的是，它不起作用，因为nextProp保留最后传递的数据。所以，即使组件只是刷新，我也不能阻止动画，因为“msg”值再也不会为空

所以，若组件只刷新而不传递新道具，那个么是否可以清除上次传递的数据，或者是否有其他方法阻止动画运行

顺便说一句，我无法比较这个。道具。味精==msg和block animation if是相同的，因为有时我需要使用相同的值运行2个动画

多谢各位。 代码：

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
看法
有生气的
缓和,，
}从“反应本机”；
导出默认类PopUpMsg扩展组件{
构造函数（）{
超级（）；
此.state={
消息：“”，
底部：新动画。值（-50）
}
}
组件将接收道具（下一步）{
如果（nextrop.msg！=''）{
这是我的国家({
msg:nextProp.msg
}, () => {
this.showMsg（）；
});
}
}
showMsg（）{
if（this.state.msg！=''）{
动画序列([
时间(
这个州，底部，
{
toValue:0，
持续时间：500
}),
动画。延迟（1000），
动画。计时（this.state.bottom，
{
toValue:-50，
持续时间：500
}),
]).start（结果=>{
if（result.finished）{
这是我的国家({
消息：“”
})
}
});
}
}
render（）{
返回(
{this.state.msg}
)
}
}
const styles=StyleSheet.create({
正文：{
颜色：'#fff'
}
});
AppRegistry.registerComponent（'PopUpMsg'，（）=>PopUpMsg）；

您不能在

组件WillReceiveProps

中更改

nextProps

，因为

nextProps

只是组件将要接收的道具的静态副本，而不是对实际道具的引用。在这种情况下，您应该将消息保持在本地组件状态，并发送一个

setState

将消息设置为

”

，或者，如果您使用的是状态容器，如Redux或MobX，发送一个将重置消息的操作。

您不能在

componentWillReceiveProps

中更改

nextProps

，因为

nextProps

只是组件将要接收的道具的静态副本，而不是对实际道具的引用。在这种情况下，您应该做的是将消息保持在本地组件状态，并发送一个

setState

将消息设置为

”

，或者，如果您使用的是状态容器（如Redux或MobX），则发送一个将重置消息的操作。

我不使用状态容器。关于你回答的第一部分，我真的不明白我该怎么做。我无法将邮件状态设置为“”，因为下一步操作会在刷新后更改它。或者你有不同的想法？RegardsHow关于将逻辑移动到

componentDidUpdate

，然后？这样，你可以得到旧道具，并将它们与当前道具进行比较，你可以毫无问题地使用

setState

。这对我没有帮助。有时组件可以一个接一个地获得具有相同值的道具，我无法阻止动画。然后你需要改变建模的方式。可能还有第二个道具，指示动画是否应该实际运行。这里的问题不是React，而是如何建模，这与React的组件模型不兼容。我不使用状态容器。关于你回答的第一部分，我真的不明白我该怎么做。我无法将邮件状态设置为“”，因为下一步操作会在刷新后更改它。或者你有不同的想法？RegardsHow关于将逻辑移动到

componentDidUpdate

，然后？这样，你可以得到旧道具，并将它们与当前道具进行比较，你可以毫无问题地使用

setState

。这对我没有帮助。有时组件可以一个接一个地获得具有相同值的道具，我无法阻止动画。然后你需要改变建模的方式。可能还有第二个道具，指示动画是否应该实际运行。这里的问题不是React，而是如何建模，这与React的组件模型不兼容。

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);