Почему не меняется значение в дочерней компоненте с первого раза?

Question

[Incold]

Здравствуйте! Я не так давно начал изучать React+Redux, и как это часто бывает столкнулся с проблемой.
У меня есть Redux-хранилище и родительская компонента Auth:

class Auth extends React.Component {
  constructor(props) {
    super(props);
    this.state = {...}
    };
    this.formRef = React.createRef();
  }
  ...
  render() {
    return (
      <div>
        <form id="auth" ref={this.formRef}>
         <SignIn methods={this.state.methodsForReg} inputs={this.state.inputs}  logValue={this.props.logValues}/>
          {console.log(this.props.logValues)} // Здесь всё хорошо, т.е. при изменении состояния меняется значение свойства
        </form>
      </div>
    )
  }
}

export default connect(
  state => ({
    ...
    logValues: state.loginValue
  }),
  dispatch => ({...})
)(Auth);

Также есть дочерняя компонента SignIn:

class SignIn extends React.Component {
  render() {
    return(
      <div>
        ...
          <div className="col-6 text-right">
            <button className="btn btn-outline-success" onClick={(event)=>{
              this.props.methods.check(this.props.inputs, event);  //Этот метод меняет значение
              console.log(this.props.logValue); // Здесь, если первый раз нажать на кнопку, значение не поменяется, но со вторым нажатием всё норм
              this.props.loginUser(); // В этом action стоит console.log на нужное значение, и он работает нормально
            }}>Sign in</button>
          </div>
        </div>
      </div>
    )
  }
}

export default connect(
  state => ({}),
  dispatch => ({
    loginUser () {
      dispatch({type:'LOGIN'});
    }
  })
)(SignIn);

Я также пробовал передавать logValue непосредственно через connect state в SignIn, но результат тот же.
Заранее, спасибо за любую помощь!

Comments

[Klein Maximus]

лучше код в песочнице опубликуйте, например, https://codesandbox.io/
так нагляднее будет

Answer 1

[Макс]

При срабатывании onClick данные в редаксе меняются через this.props.methods.check(), но поскольку пропсы и стейт еще не обновились, то компонент еще не перерисовался. Потому внутри onClick console.log(this.props.logValue); выводит не то, что вы ожидаете. А внутри loginUser() вы видите обновленное значение, потому что наверняка в экшене дергаете метод getState() который возвращает текущий стейт редакса.
Вот собственно и все

Comments

[Incold]

Спасибо, сейчас проверил, установил setTimeout на console.log и действительно проблема в том, что props и state не успевают обновиться. Если вам не трудно, можете предложить популярный метод, чтобы получить нужно значение именно в onClick (или таймер является единственным нормальным решением этой проблемы)?

[Макс]

Incold, Чтобы понять, что вы делаете, нужно видеть ваш код в sandbox. Если вам нужен таймаут, значит вы делаете что-то не так. Я лично описываю всю логику в экшенах напрямую.
Можно передавать введенные данные в метод loginUser() либо обновлять редакс стейт при изменении данных в полях через onChange и на кнопку навешать только loginUser\Submit

Кстати, очень хорошо использовать это: https://github.com/reduxjs/redux-thunk