Javascript setState（）不更改该值

从昨天开始，我一直在努力解决这个问题，但解决不了

基本上，我们正在为一家餐馆制作一个网站，顾客可以用它来订购食物并付款。 我现在实现的功能是，当用户按下checkout按钮时，它会转到/order\u confirm并显示所有已订购的菜单。我试图通过将url设置为/order\u confirm/id来传递订单号，其中id是订单号。一切正常，只是当我使用setState（）更改ORID的值（即state）并将状态值传递给相应的类时，setState似乎根本不更改该值

handleCheckoutRequest = async () => {
const { tableNumber } = this.state;
const orderOrdered = 1;
const menuItemIds = this.props.menuItems.map((a) => a.id);
const menuItemCounts = this.props.menuItems.map((a) => a.count);

await API.post(`/orders/`, null, {
      params: { tableNumber, orderStatus: orderOrdered },
    })
      .then(async (response) => {
        const orderId = response.data.id; // this works

    await API.post(`/ordered_items/${orderId}`, null, {
      params: { menuItemIds, menuItemCounts },
    })
      .then((response) => {
        this.setState({
            responses: ["Successfully added order items"], // this works
            responseStatus: "success", // this works as well
            ordId: orderId, // this doesn't
        });
        console.log(orderId); // display 25 on the console (which is right)
        console.log(this.state.ordId); // display -1 which is the default value
      })
      .catch((error) => {
        console.log(error);
      });
  })
};

我在控制台中得到这个错误

无法对未安装的组件执行React状态更新。这是 无操作，但表示应用程序内存泄漏。要解决， 取消中的所有订阅和异步任务 componentWillUnmount方法

我尝试过设置速度，使用setState（）中的arrow函数，在外部声明方法，并使用该方法更改值。这一切都不起作用

---

这是handleCheckout方法。

handleCheckout = () => {
  const { menuItems } = this.props;
  const { tableNumber } = this.state;
  let responses = [];
  if (tableNumber === -1 || !tableNumber)
    responses.push("No table has been selected");
  if (menuItems.length < 1)
    responses.push("No menu items have been added to cart");
  if (responses.length > 0) {
    this.setState({ responses, responseStatus: "fail" });
    return;
  }
  this.setState({ responses: [], responseStatus: "" });

  this.handleCheckoutRequest();
};

handleCheckout=（）=>{
const{menuItems}=this.props；
const{tableNumber}=this.state；
让响应=[]；
如果（tableNumber===-1 | |！tableNumber）
响应。推送（“未选择任何表格”）；
if（menuItems.length<1）
响应。推送（“没有菜单项添加到购物车”）；
如果（响应长度>0）{
this.setState（{responses，responseStatus:“fail”}）；
返回；
}
this.setState（{responses:[]，responseStatus:：}）；
this.handleCheckoutRequest（）；
};

这是我作为道具通过州政府的部分

<div className="cart__bottom">
   <Checkout
      id={this.state.ordId}
      onTableChange={this.handleTableChange}
      onCheckout={this.handleCheckout}
      responses={responses}
      responseStatus={responseStatus}
   />
</div>

这是它传递位置的render（）

render() {
const { id, onTableChange, onCheckout, responses, responseStatus } = this.props;
return (
  <div className="cart__checkout">
    <Response responses={responses} responseStatus={responseStatus} />
    <input
      className="input mb-2"
      type="number"
      name="tableNumber"
      placeholder="Table Number"
      onChange={onTableChange}
    />
    <Link to={{
      pathname: "/order_confirm/" + id
    }}>
      <button
        className="button is-primary is-fullwidth"
        onClick={onCheckout}
      >
        Checkout
      </button>
    </Link>
  </div>
);

render（）{
const{id，onTableChange，onCheckout，responses，responseStatus}=this.props；
返回(
结账
);

}

我还发现了一篇文章，似乎它可以解决我的问题。唯一的障碍是我没有足够好的反应来应用解决方案。

---

尽量不要将异步等待与正常承诺混用。坚持其中一个。 同时，不要承诺，因为那会给你带来地狱

const postOrder = async () => {
  const apiPostOrdersResponse = await API.post(`/orders/`, null, {
    params: { tableNumber, orderStatus: orderOrdered },
  });

  const orderId = apiPostResponse.data.id;

  const apiPostOrderItemResponse = await API.post(
    `/ordered_items/${orderId}`,
    null,
    {
      params: { menuItemIds, menuItemCounts },
    }
  );

  this.setState({
    responses: ['Successfully added order items'],
    responseStatus: 'success',
    ordId: orderId,
  });
};

---

这回答了你的问题吗？一个建议是尽量避免重复承诺。您还使用了async await，但没有使用它。试着坚持其中一个，试着把api请求逻辑和UI逻辑分开。我认为“存储库模式”可以解决您的问题。@Sysix尝试了前3个答案，但没有解决问题。您在哪里使用状态？也许你需要

useffect

如果你把

orderId

I did console.log（orderId）记录在const orderId行下面，会发生什么，但是console什么也不显示。尝试了3次，仍然得到相同的结果。