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)
    })
}

希望这会有所帮助！

我的React状态对象仅在第二次尝试时设置，为什么？

1 个答案: