javascript - 使用下拉菜单切换类别时，数量显示转到 NaN 并且不能使用增加/减少功能 ReactJs

Question

我有一个下拉选择菜单，如下图所示，当我选择第一个类别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>
      );
    }

• 菜单显示中的子类别（上图）

• clip如果这有助于理解我面临的问题，我已经做了一个小（下面的链接）。

[][视频剪辑]

标签： javascriptarraysreactjsreact-nativereact-hooks

Answer 1

您应该在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) });
  };