使用componentWillReceiveProps

Question

我有一个从redux接收状态的react组件。

我有3个动作{SIGNIN_REQUEST，SIGNIN_FAILURE，SIGNIN_SUCCESS}。

调用SIGNIN_FAILURE操作时，会更改错误状态：

我的组件中有这个功能：

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

我希望当组件收到新的道具时，这会改变消息状态......但不起作用。

有什么建议吗？

更新：onPressLogin都没有像我预期的那样工作。

我的组件：

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

通知组件：

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

在我的组件通知中，我删除了'shouldComponentUpdate'功能。 现在组件正常工作;）