如何处理错误道具? (错误模式只弹出一次)

时间:2017-09-08 12:56:45

标签: reactjs react-native react-redux

当用户尝试使用不正确的凭据登录时,我显示'错误模式'。我正在检查我的nextProps.errorMsg是否未定义。如果有任何错误消息,则显示错误模式。

它只在第一次尝试时起作用。当我将props.errorMsg从'找不到帐户'设置为''或未定义时,我发现componentWillReceiveProps没有调用。

componentWillReceiveProps(nextProps) {
    // onAuthComplete Pass twice. so. it's
    console.log('yo');

    console.log(nextProps.errorMsg);
    if(nextProps.errorMsg) {
      this._showModal(); <<- here 
    }
    this.setState({isLoading:true});
    if (nextProps.hType==1 || nextProps.hType==2) {
      nextProps.navigation.navigate('Feed');
      this.setState({ password: ''})
    }
  }

_hideModal = () => {
    // empty error
    this.props.emptyErrorMsg;
    this.setState({ isModalVisible: false });
}

这是我的减压器片段

const INITIAL_STATE = { token: null, errorMsg: undefined }
export default function(state = INITIAL_STATE, action) {
    case AUTH_LOGIN_FAIL:
      return { token: null, errorMsg: `Can't Find Account` };
    case EMPTY_ERROR_MSG:
      return { ...state, errorMsg: undefined}
}

和行动

export const emptyErrorMsg = () => ({
  type: EMPTY_ERROR_MSG
})

1 个答案:

答案 0 :(得分:2)

你在评论中指出

    this.props.emptyErrorMsg;

    this.props.emptyErrorMsg();

都执行函数emptyErrorMsg 这是的情况。区别在于:

const yourFunction = this.props.emptyErrorMsg;
yourFunction();
this.props.emptyErrorMsg();

this.props.emptyErrorMsg返回指向函数本身的指针。它没有被执行。您可以将函数指定给常量并稍后执行常量(yourFunction())。

this.props.emptyErrorMsg()执行该功能。这可能是你想在函数_hideModal()中做的。