При переключении категории с помощью раскрывающегося меню дисплей количества переходит на NaN и не может использовать функцию увеличения / уменьшения ReactJs - PullRequest
Новая
       136

При переключении категории с помощью раскрывающегося меню дисплей количества переходит на NaN и не может использовать функцию увеличения / уменьшения ReactJs

0 голосов
/ 03 августа 2020

У меня есть раскрывающееся меню выбора, как показано на изображении ниже, и когда я выбираю первую категорию Eco-YogaMats , он извлекает данные с помощью API и отображает на экране и add, subtract и initialquantitiy=0 отображается правильно (и может изменить количество), но когда в следующий раз я выбираю любую другую категорию (Travel-YogaMats), отображается add, subtract, но поле количества отображается как белый квадрат (если я добавляю / вычитаю, он переходит к NaN) не знаю, почему это происходит, это происходит только тогда, когда я переключаюсь в категорию, и этого не происходит, когда я впервые выбираю категорию. Не могу понять причину этого, я попытался немного подправить, но мне тоже не помогло, любые предложения, пожалуйста. 

//addBasketitems  are array of objects of selected Category
function Home({ props, addBasketitems }) {
  let initialQuantities = props.reduce((quantities, product) => ({ ...quantities, [product.product_name]: 0 }), {});

// increase items
const increase = (productName) => {
        setQuantites({ ...quantities, [productName]: quantities[productName] + 1 });
}

// decrease items
const decrease = (productName) => {
    setQuantites({ ...quantities, [productName]: Math.max(0, quantities[productName] - 1) });
  };
  • и теперь оператор return, который отображается на экране 
     return (
        <div className="products">
          {props.map((eachproduct) => {
            let productName = eachproduct.product_name;
            let producNumber = eachproduct.producNumber;
            let price = eachproduct.price;
            let desc = eachproduct.productDescription;
            let photo = eachproduct.image_URL;
            let stockQuantity = eachproduct.stockQuantity;
            return (
              <div className="products" key={producNumber}>
                <ul>
                  <li>
                    <img className="products-image" src={photo} />
                  </li>
                  <li>{productName} </li>
                  <li>
                    Item No:{producNumber}(InStock:{stockQuantity})
                  </li>
                  <li>price:{price}£ </li>
                  <li>{desc}</li>
                  <li>
                    <ButtonGroup aria-label="quantityofproduct" key={productName}>
                      <Button variant="secondary" name="subtract" value="subtract" onClick={() => decrease(productName)}>
                        -
                      </Button>
                      <Button name={productName} variant="secondary">
                        {quantities[productName]} // here its showing NaN
                      </Button>
                      <Button variant="secondary" name="add" value="add" onClick={() => increase(productName)}>
                        +
                      </Button>
                    </ButtonGroup>
                    &nbsp;
    <Button
                      name={producNumber}
                      value={quantities[productName]}
                      variant="primary"
                      onClick={() => {
                        addBasketitems(eachproduct, quantities[productName]);
                        clearselection(productName);
                        alert(`${productName}, with quantitiy${quantities[productName]} is added to the basket`);
                      }}
                    >
                      Add to Basket
                    </Button>
                  </li>
                </ul>
              </div>
            );
          })}
        </div>
      );
    }

  • Подкатегория в отображении меню (над фото)

  • I have made a small clip (Below Link)if that helps to understand the issue i am facing.

[] [Видеоклип]

1 Ответ

0 голосов
/ 03 августа 2020

Вы должны обновлять initialQuantities каждый раз, когда изменяется props. 

const [initialQuantities, setInitialQuantities] = useState({}); 

useEffect(() => {
    const newQuantities = props.reduce((quantities, product) => ({ ...quantities, [product.product_name]: 0 }), {});
    setInitialQuantities(newQuantities); 
}, [props]);

Или вам не нужно initialQuantities. 

const [quantities, setQuantities] = useState({}); 
const increase = (productName) => {
    setQuantites({ ...quantities, [productName]: (quantities[productName] || 0) + 1 });
}
// decrease items
const decrease = (productName) => {
    setQuantites({ ...quantities, [productName]: Math.max(0, (quantities[productName] || 0) - 1) });
  };
...