setState() 不改变值

Question

我从昨天开始一直在努力解决这个问题，但无法解决。

基本上，我们正在为一家餐厅制作一个网站，客户可以使用该网站订购食物并付款。 我现在实现的功能是，当用户按下结帐按钮时，它会转到 /order_confirm 并显示所有订购的菜单。我试图通过将 url 设置为 /order_confirm/id 来传递订单号，其中 id 是订单号。一切正常，除了当我执行 setState() 来更改状态的 ordId 的值并将状态值传递给相应的类时，似乎 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() 中的箭头函数，在外部声明方法并使用该方法更改值。这一切都没有奏效。

---

这是 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();
};

这是我将状态作为道具传递的部分。

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

}

我还发现一篇文章似乎可以解决我的问题。唯一的障碍是我对 React 的应用不够好，无法应用解决方案。
Avoid React state update warnings on unmounted components

Answer 1

尽量不要将异步等待与普通承诺混为一谈。坚持其中之一。 也尽量不要嵌套承诺，因为这会给你带来回调地狱。

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