@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, но результат тот же.
Заранее, спасибо за любую помощь!
  • Вопрос задан
  • 55 просмотров
Решения вопроса 1
@matios
Technical Team Lead
При срабатывании onClick данные в редаксе меняются через this.props.methods.check(), но поскольку пропсы и стейт еще не обновились, то компонент еще не перерисовался. Потому внутри onClick console.log(this.props.logValue); выводит не то, что вы ожидаете. А внутри loginUser() вы видите обновленное значение, потому что наверняка в экшене дергаете метод getState() который возвращает текущий стейт редакса.
Вот собственно и все
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы