javascript - 反应，我怎样才能接近标签的价值？

Question

import React, { useState, useEffect } from "react";
import { addCart, getInventory } from "../../Service/Service";

function InventroyDry85(props) {
  const [inventory, setInventory] = useState([]);

  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const [toggle, setToggle] = useState(true);

  useEffect(() => {
    refreshPage();
  }, []);
  
  useEffect(() => {

    inventory.forEach((item)=>{
      if(item.Quantity === 0){
        setToggle(false)
      }
    })

  }, [inventory]);

 

  function refreshPage() {
    setLoading(true);

    getInventory()
      .then((json) => {
        setInventory(json);

        setLoading(false);
      })
      .catch((err) => {
        console.error(err);
        setError(err);
      });
  }

  if (loading)
    return (
      <div className="alert alert-info">
        Please stand by while we connect your call....
      </div>
    );
  if (error)
    return (
      <div className="alert alert-danger">There was an error loading...</div>
    );

  async function addCartButton(e) {
    await addCart(e.target.value);
    reloadPage();
  }


  function reloadPage() {
    window.location.reload(false);

    
  }
  return (
    <div className="col">
      <table className="table">
        <thead>
          <tr>
            <th>SKU</th>
            <th>Name</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Add</th>
          </tr>
        </thead>
        <tbody>
          {inventory.map((item) => (
            <tr>
              <td>{item.SKU}</td>
              <td>{item.Name}</td>
              <td>{item.Quantity}</td>
              <td>{item.Price}</td>
              <td>
                {toggle ? (
                  <button
                    className="alert-primary alert"
                    value={item.SKU}
                    onClick={addCartButton}
                  >
                    Add
                  </button>
                ) : (
                  <button className="alert">Out of Stock</button>
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );

  
}

export default InventroyDry85;

这是我的代码。库存状态有一个 JSON 文件数组，例如

{"SKU":"59779-642","Name":"Napkin - Beverage 1 Ply","Price":37.99,"Quantity":1}

toggle 是一种状态（默认为 true，显示添加按钮）当 toggle 为 false 时，按钮应更改为 Out of Stock

库存状态从节点服务器获取价值，因此它不断变化。

问题

当库存的数量等于0时，我尝试制作一个功能，切换状态更改为false以更改按钮。

所以我尝试像这样使用 useEffect ...

  
  useEffect(() => {

    inventory.forEach((item)=>{
      if(item.Quantity === 0){
        setToggle(false)
      }
    })

  }, [inventory]);

但它只是将切换状态更改为 false 并使所有按钮缺货，甚至库存。数量还不是0...

我怎样才能解决这个问题？

标签： javascriptnode.jsreactjs