為什么當我單擊包含向上功能的按鈕時，item.newStock 編號總是落后一個？ （反應）

Question

我正在制作一個小型電子商務網站，目前正在開發購物車。 這個想法是，每次我按下包含向上功能的按鈕時，數組都應該改變，然后通過 item.newStock 在屏幕上打印。 然而，我第一次按下按鈕時它什么也不做，第二次它添加一個。 但是當我使用 console.log 時，這個數字比通過 item.newStock 打印的數字高一。

任何想法為什么會這樣？

const Table = () => {
  return (
    <div class="container">
      <table class="table m-4">
        <thead>
          <tr>
            <th scope="col">Cake</th>
            <th scope="col">QTY</th>
            <th scope="col">Price</th>
          </tr>
        </thead>
        <tbody>
          {array.map((item) => {
            if (item.newStock > 0) {
              return (
                <>
                  <tr>
                    <th scope="row">{item.title}</th>
                    <td>{item.newStock}</td>
                    <td>${item.price}</td>
                    <div class="changeQTY">
                      <h5>QTY</h5>
                      <button class="up" onClick={Up}>
                        +
                      </button>
                      <button class="down">
                        <span class="minus">-</span>
                      </button>
                      <button>Delete</button>
                    </div>
                  </tr>
                </>
              );
            }
          })}
        </tbody>
      </table>
      <button>Confirm Purchase</button>
    </div>
  );
};

function Up() {
  setBuyQTY(parseInt(buyQTY) + 1);
  setArray((state) =>
    state.map((x) =>
      x.id === id
        ? {
            ...x,
            newStock: parseInt(buyQTY),
          }
        : x,
    ),
  );
}

Answer 1

因為setState是異步的，當你到達那個setArray時buyQTY不會更新。

老實說，如果每種產品都應該有自己的數量，我看不出buyQTY有什么意義，所以把它去掉，然后做

setArray((state) =>
    state.map((x) =>
      x.id === id
        ? {
            ...x,
            newStock: x.newStock + 1,
          }
        : x,
    ),
  );