Мой объект состояния React настраивается только со второй попытки, почему?

Question

В настоящее время я борюсь с проблемой, когда я передаю размер элемента в this.state.taken_size, и после этого я создаю элемент заказа с заказом или обновляю уже существующий заказ (просто для понимания).

Поэтому, когда я беру размер, в моем console.log() я вижу, что он принимает необходимое значение и устанавливает его, но когда я передаю этот размер в поле, он говорит что-то вроде this.state.taken_size is undefined. Но когда я нажимаю второй раз, мой полученный размер передается в поле, и он работает.

Мой код ниже

    takeSize(event){
        event.preventDefault()
        const taken_size = event.target.value
        console.log(this.state.taken_size)
        this.setState({
            taken_size:taken_size
        })
    }



    handleAddingToCart(event){
        event.preventDefault(event)
        console.log(this.state.taken_size)
        axios.post('http://127.0.0.1:8000/api-o-i/create/', {
            item: this.state.item.id,
            user: localStorage.user_pk,
            size: this.state.taken_size, 
        }).then(res => {
          // Do other things
        })
    }

И мой HTML-код:

<form onSubmit={this.handleAddingToCart}>
  <div className="product-options">
    <label>
      Size 
        <ul class="product__size-list">
          {this.state.all_sizes.map((size) => {
            return <div>
              <div onClick={this.takeSize} className="product">  
                <li value={size.pk} class="centered" >
                  <span value={size.pk}>{size.size}</span>
                </li>       
              </div>
          </div>
        })}
      </ul>
    </label>
  </div>
  <div className="add-to-cart">
    <button htmlType="submit" className="add-to-cart-btn">
      <i className="fa fa-shopping-cart"></i> add to wishlist
    </button>
  </div>
</form>

Если нужно что-то еще, не стесняйтесь спрашивать.

Answer 1

Вы можете инициализировать ваше начальное состояние в конструкторе класса Component, чтобы оно не было неопределенным, как это

class MyComponent extends React.Component {
    contructor() {
        super();
        // set the initial state
        this.state = {
            taken_size: 0 //or null or whatever you want
        };
    }

    /*

      Other code

     */
}

Кроме того, вы регистрируетесь перед установкой состояния, которое будет записывать предыдущее состояние.setState асинхронно.Поэтому, если вы хотите что-то сделать после обновления состояния, вы можете использовать обратный вызов в качестве второго аргумента для setState.

 takeSize(event){
    event.preventDefault()
    const taken_size = event.target.value

    this.setState({
        taken_size:taken_size
    },()=>{
        console.log(this.state.taken_size)
    })
}

Надеюсь, это поможет!