Блог

 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}

переключатель-это состояние (по умолчанию верно, чтобы показать кнопку добавить) Если переключатель имеет значение false, кнопка должна измениться на «Нет в наличии».

Состояние запасов получает значение от сервера узла, поэтому оно продолжает меняться.

Вопрос

Я пытаюсь создать функцию, когда количество запасов равно 0, состояние переключения изменяется на false, чтобы изменить кнопку.

Поэтому я стараюсь использовать эффект вот так…

   
  useEffect(() => {

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

  }, [inventory]);

 

Но это просто меняет состояние переключения на false и делает кнопку » Все » недоступной, даже в инвентаре. количество все еще не равно 0…

Как я могу это исправить?