Обратная связь mapDispatchToProps не может немедленно обновить mapStateToProps

Question

При использовании избыточности для управления формой входа в систему я сталкиваюсь со странной проблемой

основной код ниже:

import ...

class LoginForm extends Component {
  constructor(props) {
    ...
  }
  componentWillUnmount(){
    clearTimeout(this.timeoutHandle);
  }
  handleName(evt) {
    this.setState({name: evt.target.value})
  }
  handlePwd(evt) {
    this.setState({pwd: evt.target.value})
  }
  handleLogin(evt) {
    const { name, pwd } = this.state
    const { errcode } = this.props.loginItems
    const { fetchLogin } = this.props
    let login = {
      name: name,
      pwd: pwd
    }
    fetchLogin(login)
    console.log(errcode)                                 <------ this line
    errcode === 0 && (
      this.timeoutHandle = setTimeout(() => {
        this.loginSuccess()
      }, 1000)
    )
  }
  loginSuccess() {
    ...
  }
  render() {
    const { errcode, errmsg } = this.props.loginItems
    const { name, pwd } = this.state
    return (
      <FlexContainerCenterColumn>
        <LoginInput
          onChange={this.handleName}
          value={name}>
        </LoginInput>
        <LoginInput
          type="password"
          onChange={this.handlePwd}
          value={pwd}>
        </LoginInput>
        <SubmitButton
          ...
          onClick={this.handleLogin}>
          Login
        </SubmitButton>
        <LoginFoot>
          {errcode === 1 && ...}
          {errcode === 0 && ...}
        </LoginFoot>
      </FlexContainerCenterColumn>
    );
  }
}

export default connect(
  (state) => ({
    loginItems: state.login.loginItems
  }),
  {changeRoute, fetchLogin}
)(withRouter(LoginForm))

fetchLogin - это почтовый метод для получения обратной связи от сервера

при успешном входе в систему:

loginItems:{
  errcode: 0,
  errmsg: ''
}

и сбой входа в систему:

loginItems:{
  errcode: 1,
  errmsg: 'login failure'
}

Эта форма является контролируемым компонентом

Первый успешный вход в систему, console.log(errcode) return 1, затем повторный вход в систему возвращает 0.

Как мне получить правильный возврат 0 при первом успешном входе в систему.

Answer 1

С fetchLogin вы, похоже, обновляете хранилище приставок, и обновление магазина происходит не сразу, поэтому errorcode не сразу после отправки действия

Вам необходимо реализовать логику теста для кода ошибки в componentDidUpdate (In view of version 16.3.0, Previously you would use componentWillReceiveProps) методе

class LoginForm extends Component {
  constructor(props) {
    ...
  }
  componentWillUnmount(){
    clearTimeout(this.timeoutHandle);
  }
  handleName(evt) {
    this.setState({name: evt.target.value})
  }
  handlePwd(evt) {
    this.setState({pwd: evt.target.value})
  }
  handleLogin(evt) {
    const { name, pwd } = this.state
    const { fetchLogin } = this.props
    let login = {
      name: name,
      pwd: pwd
    }
    fetchLogin(login)
  }
  loginSuccess() {
    ...
  }
   componentDidUpdate(prevProps) {
     const {errorcode: prevErrorcode } = prevProps.loginItems;
     const {errorcode } = prevProps.loginItems;
     if(errorcode !== prevErrorcode) {
       errcode === 0 && (
          this.timeoutHandle = setTimeout(() => {
             this.loginSuccess()
          }, 1000)
       )
    }

  }
  render() {
    const { errcode, errmsg } = this.props.loginItems
    const { name, pwd } = this.state
    return (
      <FlexContainerCenterColumn>
        <LoginInput
          onChange={this.handleName}
          value={name}>
        </LoginInput>
        <LoginInput
          type="password"
          onChange={this.handlePwd}
          value={pwd}>
        </LoginInput>
        <SubmitButton
          ...
          onClick={this.handleLogin}>
          Login
        </SubmitButton>
        <LoginFoot>
          {errcode === 1 && ...}
          {errcode === 0 && ...}
        </LoginFoot>
      </FlexContainerCenterColumn>
    );
  }
}

export default connect(
  (state) => ({
    loginItems: state.login.loginItems
  }),
  {changeRoute, fetchLogin}
)(withRouter(LoginForm))