Реактивное переключение возвращает неправильное состояние при изменении начального состояния

Question

Я хочу переключить свое состояние rememberMe, когда пользователь установит флажок rememberMe.

Исходное состояние false; когда я нажимаю, я хочу, чтобы он повернулся к true, чтобы я мог установить другое условие, однако этого не происходит.

Пропеллер rememberMe остается ложным при первом щелчке, а затем при втором щелчке становится истинным.

Кто-нибудь знает, почему это так?

код:

state = {
orderForm: {
  email: {
        elementType: "input-email",
        elementConfig: {
          type: "email",
          placeholder: "Your E-Mail"
        },
        value: this.props.email || "",
        validation: {
          required: true
        },
        valid: this.props.email ? true : false,
        touched: false
      },
},
 rememberMe: false

}

вход

   return (
            <Input
              inputtype={formElement.config.elementType}
              key={formElement.id}
              elementType={formElement.config.elementType}
              elementConfig={formElement.config.elementConfig}
              value={formElement.config.value}
              invalid={!formElement.config.valid}
              shouldValidate={formElement.config.validation}
              touched={formElement.config.touched}
              changed={event => this.inputChangedHandler(event, formElement.id)}
              rememberMe={this.state.rememberMe}
              checkboxChanged={this.handleCheckboxChange}
            />
          );

функция для переключения:

  handleCheckboxChange = event => {
    this.setState((previousState) => {
      return {rememberMe: !previousState.rememberMe}
    });
    console.log(this.state.rememberMe);

    // setting local storage for email
    const email = this.state.orderForm.email.value;
    const rememberMe = this.state.rememberMe;
    localStorage.setItem("rememberMe", rememberMe);
    localStorage.setItem("email", rememberMe ? email : "");
  };```

Answer 1

Помните, что setState является асинхронным, поэтому изменения, которые вы вносите в состояние, будут применены только через некоторое время после срабатывания handleCheckboxChange. Поэтому console.log(this.state.rememberMe) не будет отображать обновления вашего состояния, как вы, вероятно, ожидаете.

Answer 2

В реакции обновления состояния являются асинхронными. Таким образом, при this.setState реакция не гарантирует немедленного обновления состояния. По этой причине this.state.rememberMe не будет иметь нового значения внутри функции handleClick. Лучший способ - использовать текущее состояние, чтобы определить значение и использовать его.

Поэтому внутри функции handleClick вы можете сделать это:

  handleCheckboxChange = event => {
    const rememberMe = !this.state.rememberMe; // storing the required value in a variable
    this.setState((previousState) => {
      return {rememberMe: !previousState.rememberMe}
    });

    // setting local storage for email
    const email = this.state.orderForm.email.value;
    localStorage.setItem("rememberMe", rememberMe);
    localStorage.setItem("email", rememberMe ? email : "");
  };```

Пожалуйста, ознакомьтесь со следующей документацией setState .