функция работает только в отладчике React

Question

Я довольно новичок в React, поэтому мне нужна ваша помощь.

У меня есть компонент с несколькими входами, поэтому я должен проверить их.

Кнопка отправки по умолчанию отключена, и только если входные данные не пустые, я могу сделать это. Отправить.

Если я удалю значение внутри ввода, кнопка должна go вернуться в отключенное состояние.

Моя проблема в том, эта функция (функция проверки) работает только в отладчике, когда я go шаг за шагом .

Может кто-нибудь мне помочь? Вот сегменты моего кода, которые я считаю полезными для понимания моей проблемы.

this.state = {
            profile: newProfile,
            disable: true,

        };



let newProfile= {
            firstName: "",
            lastName: "",
            nickname: "",
            email: ""
        };

 validate = () => {
        console.log(this.state)
        debugger;
        if (!this.state.profile.name || !this.state.profile.email) {
            return false;
        } else {
            console.log("Profile name and email NOT BLANK")
            console.log(this.state)
            return true;
        }
    };


profileChange= ((target, value) => {
            this.setState(prevState => {
                let profile= this.state.profile;
                profile[target] = value;
                    return {
                        profile: profile,

                    }

            })

 const isValid = this.validate();
        if (isValid) {
            console.log("valid inputs");
            this.setState({disable: false});
        }
        else{
            console.log("invalid inputs");
            this.setState({disable: true});
        }

    });

Answer 1

Функция setState является асинхронной, что означает, что при обновлении состояния могут запускаться другие функции.

Я думаю, что в вашем случае происходит то, что состояние обновляется, но до того, как это произошло, this.validate() уже вызывается.

Чтобы это исправить, вы должны добавить код, который вы хотите запустить после обновления этого состояния, в качестве обратного вызова:

this.setState(prevState => {
    let profile= this.state.profile;
    profile[target] = value;

    return {
        profile: profile,
    }
}, () => {
    const isValid = this.validate();

    if (isValid) {
        console.log("valid inputs");
        this.setState({disable: false});
    } else {
        console.log("invalid inputs");
        this.setState({disable: true});
    }
});

Answer 2

setState является асинхронной функцией ( Почему? ), и в момент, когда вы вызываете this.validate, this.state.profile еще не было установлено.

Но когда вы шаг за шагом проходите выполнение, состояние обновляется до желаемого значения и, следовательно, оно работает для вас.

Решением здесь является использование функции callback , которую setState предоставляет для выполнения проверки только после установки состояния.

profileChange = (target, value) => {
  this.setState(prevState => {
    return {
      profile: {
        ...prevState.profile,
        [target]: value,
      }
    };
  }, () => {
    const isValid = this.validate();
    if (isValid) {
      console.log("valid inputs");
      this.setState({ disable: false });
    } else {
      console.log("invalid inputs");
      this.setState({ disable: true });
    }
  });
};

Также обратите внимание, что я использовал prevState внутри setState вместо this.state, так что состояние profile фактически не мутировало.

Answer 3

вы можете использовать «отключенные» параметры при вводе. Вот пример

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" disabled={!this.state.value}/>
      </form>
    );
  }
} 

и вот кодовое поле, которое я сделал для вас, чтобы вы могли быстрее тестировать ragnar