声明直到第二次提交表单后才更新

Question

因此，当添加会话并提交表单时，我希望将客户端的价格转移到会话状态中。这就是我在此处的代码这一部分要尝试的操作。 / p>

state = {
    id: null, 
    name: null, 
    duration: null, 
    dayOfWeek: null,
    price: null
  }

handleSubmit = (e) => {
    e.preventDefault();
    let newPrice = 0;
    this.props.clientList.filter(client => {
      if (client.name === this.state.name) 
      {newPrice = client.price}
      this.setState({
        price : newPrice
      });
      console.log("price = " + this.state.price, 'newPrice = ' + newPrice)
    })
    this.props.addSession(this.state);
    e.target.reset();
    this.setState({
      id: null, 
      name: null, 
      duration: null, 
      dayOfWeek : null
    });
  }   

发生了什么，我试图在控制台图像中进行描绘，我添加的两个会话是，当我第一次添加它时，它注销了price = null和newPrice = 40，第二次是价格=40。为什么我的代码在这里不起作用？

如果需要，我可以添加更多代码。让我知道您需要看什么，谢谢！

Answer 1

状态不会立即更新。如果状态更新后需要回调，则可以使用

this.setState({
      price : newPrice
}, ()=>{
 //CallBack here
       console.log("price = " + this.state.price, 'newPrice = ' + newPrice)
})

希望有帮助。如果我不明白你的问题。请回复

Answer 2

setState是一个异步函数...您正在通过在setState之后直接调用以下行来访问旧状态值：

this.props.addSession(this.state); 

-

handleSubmit = (e) => {
  e.preventDefault();
  let newPrice = 0;
  this.props.clientList.filter((client) => {
    if (client.name === this.state.name) {
      newPrice = client.price;
    }

    this.setState({
      price: newPrice,
    });
    console.log(`price = ${this.state.price}`, `newPrice = ${newPrice}`);
  });

  this.props.addSession({ ...this.state, price: newPrice }); // <- Look at this
  e.target.reset();
  this.setState({
    id: null,
    name: null,
    duration: null,
    dayOfWeek: null,
  });
};