Update-Status der Komponente mit ComponentWillReceiveProps

Question

Ich habe eine Reaktionskomponente, die Zustand von Redux erhalten.

Ich habe 3 Aktionen {SIGNIN_REQUEST, SIGNIN_FAILURE, SIGNIN_SUCCESS}.

Wenn die SIGNIN_FAILURE Aktion aufgerufen wird, ändert sich die Statusfehler:

Ich habe diese Funktion in meiner Komponente:

componentWillReceiveProps(nextProps) { 
    if (nextProps.errors != '') { 
     this.setState({ 
     message: nextProps.errors, 
     }); 
    } 
    } 

Ich gehe davon aus, dass, wenn die Komponente erhalten neue Requisiten, diese Änderungen der Nachrichtenstatus ... aber nicht funktionieren.

Irgendwelche Vorschläge?

UPDATE: Weder onPressLogin funktioniert wie erwartet.

Meine Komponente:

import React, { 
    PropTypes, 
    Component, 
    StyleSheet, 
    View, 
    Text, 
    ScrollView, 
    TouchableOpacity, 
} from 'react-native'; 
import { connect } from 'react-redux'; 
import { Actions } from 'react-native-router-flux'; 
import { Picker } from 'react-native-prefix-picker'; 
import Notification from 'react-native-notification'; 

import { signIn, signInGuest } from '../actions/SignInActions'; 

// other import 

const styles = StyleSheet.create({ 

    scroll: { 
    paddingLeft: 16, 
    paddingRight: 16, 
    }, 
}); 

class SignIn extends Component { 

    static propTypes = { 
    isConnected: PropTypes.bool, 
    isWaiting: PropTypes.bool, 
    errors: PropTypes.string, 
    dispatch: PropTypes.func, 
    } 

    constructor(props) { 
    super(props); 
    this.state = { 
     prefix: '', 
     phone: '', 
     password: '', 
     message: '', 
     errorInputT: '', 
    }; 
    this.onPressGuest = this.onPressGuest.bind(this); 
    this.onPressLogin = this.onPressLogin.bind(this); 
    } 

    componentWillReceiveProps(nextProps) { 
    if (nextProps.errors != '') { 
     this.setState({ 
     message: nextProps.errors, 
     }); 
    } 
    } 

    onPressLogin() { 

    if (!this.props.isConnected) { 
     this.setState({ 
     message: 'Network error', 
     }); 
     return; 
    } 

    const prefix = this.state.prefix; 
    const phone = prefix + this.state.phone; 
    const password = this.state.password; 

    this.props.dispatch(signIn(phone, password)); 
    } 

    render() { 
    return (
     // ... 
    ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    errors: state.signIn.errors, 
    isWaiting: state.signIn.isWaiting, 
    isConnected: state.network.isConnected, 
    } 
}; 

export default connect(mapStateToProps)(SignIn); 

Mitteilung Komponente:

import React, { 
    Component, 
    StyleSheet, 
    PropTypes, 
    Text, 
    Animated, 
    Dimensions, 
} from 'react-native'; 

const Screen = Dimensions.get('window'); 

const styles = StyleSheet.create({ 
    container: { 
    position: 'absolute', 
    bottom: 35, 
    width: Screen.width - 80, 
    left: 40, 
    right: 40, 
    backgroundColor: '#444', 
    alignItems: 'center', 
    padding: 6, 
    borderRadius: 12, 
    shadowColor: '#000', 
    shadowOpacity: 0.5, 
    shadowRadius: 1, 
    shadowOffset: { 
     width: 0, 
     height: 1, 
    }, 
    }, 
    message: { 
    color: '#fff', 
    fontSize: 12, 
    textAlign: 'center', 
    }, 
}); 

const propTypes = { 
    fadeTime: PropTypes.number, 
    minOpacity: PropTypes.number, 
    maxOpacity: PropTypes.number, 
    message: PropTypes.string, 
}; 

const defaultProps = { 
    fadeTime: 500, 
    minOpacity: 0.0, 
    maxOpacity: 0.9, 
    message: '', 
}; 

class Notification extends Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     opacityValue: new Animated.Value(this.props.minOpacity), 
    }; 
    } 

    shouldComponentUpdate() { 
    if (this.props.message != '') { 
     return true; 
    } 
    return false; 
    } 

    componentWillReceiveProps() { 
    this.fadeIn(); 

    setTimeout(() => { 
     this.fadeOut(); 
    }, 3000); 
    } 

    fadeIn =() => { 
    Animated.timing(this.state.opacityValue, { 
     duration: this.props.fadeTime, 
     toValue: this.props.maxOpacity, 
    }).start(); 
    } 

    fadeOut =() => { 
    Animated.timing(this.state.opacityValue, { 
     duration: this.props.fadeTime, 
     toValue: this.props.minOpacity, 
    }).start(); 
    } 

    render() { 

    if (this.props.message === '') { 
     return null; 
    } 

    return (
     <Animated.View style={[styles.container, { opacity: this.state.opacityValue }]}> 
     <Text style={styles.message}>{this.props.message}</Text> 
     </Animated.View> 
    ); 
    } 
} 

Notification.propTypes = propTypes; 
Notification.defaultProps = defaultProps; 

export default Notification; 

Answer 1

In meiner Komponente Mitteilung ich habe löschen 'shouldComponentUpdate' Funktion. Jetzt funktioniert die Komponente richtig;)