setState игнорируется в handleSubmit

#javascript #reactjs

Вопрос:

Когда отправленное значение формы должно быть 2.

 this.state = { dog: 1 };
this.handleSubmit = this.handleSubmit.bind(this);
handleSubmit(e) {e.preventDefault(); this.setState({dog: 2})}
<Form onSubmit={this.handleSubmit}><Button variant="primary" 
type="submit">Submit</Button></Form>

1. Покажите остальную часть вашего кода — откуда берется Form компонент? Передает ли он аргумент события handleSubmit ?

2. Честно говоря, ваша логика кода выглядит нормально? Вероятно, вы просто неправильно настроили компонент класса.

Ответ №1:

Прежде всего, вы должны передать props в super()

  constructor(props) {
    super(props);
    this.state = { dog: 1 };
}

Функция стрелки решила бы проблему this

 handleSubmit = (event) => {
    event.preventDefault()
    this.setState({dog: 2})
}

<Form onSubmit={this.handleSubmit}>
    <Button variant="primary" type="submit">Submit</Button>
</Form>

Ответ №2:

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

 handleSubmit(e) {
  e.preventDefault()
  this.setState({dog: 2}, ()=>console.log(this.state.dog))
}

Это будет консоль 2 .

Ответ №3:

Это поможет понять, как происходит setState:

     constructor(props) {
        super();
        this.state = {
            dog: 1
        };
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault()
        this.setState({ dog: 2 }, () => {
            console.log(this.state.dog)
        })
    }

    render() {
        const { dog } = this.state;
        return (
            <>
                <span>Dog Value : {dog}</span>
                <form onSubmit={this.handleSubmit}>
                    <button variant="primary" type="submit">Submit</button>
                </form>
            </>
        )
    }

Ответ №4:

  class App extends Component {
  constructor(props) {
    super();
    this.state = { dog: 1 };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(e) {
    e.preventDefault();
    this.setState({ dog: 2 });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <button> Submit</button>
        <p>{this.state.dog}</p>
      </form>
    );
  }
}

Это работает просто отлично. Что такое форма? Вы имели в виду форму?

Используя свой код, вы можете попробовать добавить handleSubmit в onClick кнопки, чтобы посмотреть, обновляется ли ваше состояние.