React新手求助：如何从Items组件获取quantity值至其他组件

你遇到的问题本质是React组件间的状态共享问题，直接操作DOM获取值不符合React的数据流理念，正确的做法是状态提升——把需要共享的状态放到所有需要用到它的组件的共同父组件中，通过props传递状态和更新方法。

具体实现步骤： #

1. 在共同父组件中维护全局的食品数量状态

假设你的Items组件被Menu这类父组件渲染，在父组件里统一管理所有食品的数量：

import { useState } from "react";
import Items from "./Items";

function Menu() {
  // 用对象存储每个食品的数量，键为食品名称，值为对应数量
  const [itemQuantities, setItemQuantities] = useState({});

  // 定义更新数量的回调函数，传递给子组件
  const handleQuantityChange = (itemName, newQuantity) => {
    setItemQuantities(prev => ({
      ...prev,
      [itemName]: newQuantity
    }));
  };

  // 这里可以直接使用itemQuantities做后续操作，比如计算总价、传给购物车组件等
  // 示例：<Cart quantities={itemQuantities} />

  return (
    <div className="Menu">
      {/* 渲染Items时传入当前数量和回调函数 */}
      <Items 
        name="Pizza" 
        img="/pizza.jpg" 
        dis="美味芝士披萨" 
        price={19.99}
        quantity={itemQuantities["Pizza"] || 0}
        onQuantityChange={handleQuantityChange}
      />
      <Items 
        name="Burger" 
        img="/burger.jpg" 
        dis="经典牛肉汉堡" 
        price={12.99}
        quantity={itemQuantities["Burger"] || 0}
        onQuantityChange={handleQuantityChange}
      />
    </div>
  );
}

export default Menu;

2. 修改Items组件，依赖父组件传递的状态和方法

移除组件内部的quantity状态，改用父组件传入的props，点击按钮时调用父组件的回调更新状态：

import "./items.css"

function Items(props){
    const { name, quantity, onQuantityChange } = props;

    const add = () => {
        const newQuantity = quantity + 1;
        onQuantityChange(name, newQuantity);
    }
    
    const subtract = () => {
        if( quantity > 0){
            const newQuantity = quantity - 1;
            onQuantityChange(name, newQuantity);
        }
    }

    return(
        <div className="Item-card">
            <img src={props.img} className="Item-image"/>
            <div className="Item-info">
                <h1 className="Item-name">{props.name}</h1>
                <p className="Item-description">
                    {props.dis}
                    <p className="Item-price"> Price: {props.price}$</p>
                </p>
                <div className="Item-quantity">
                    <button className="button" id="add" onClick={add}>+</button>
                    <p className="quantity">{quantity}</p>
                    <button className="button" id="subtract" onClick={subtract}>-</button>
                </div>
            </div>
        </div>
    );
}

export default Items

为什么不要用DOM操作？ #

React是单向数据流，组件UI由状态驱动，直接操作DOM会打破这种机制，容易导致状态与UI不一致；而且多个同class元素时，DOM选择器无法精准区分每个组件的状态，这就是你之前获取值返回undefined的核心原因。

另外你原代码里的let pizza = 0是局部变量，组件每次渲染都会重置这个值，完全起不到存储数量的作用，状态提升后就不需要这类无效的局部变量了。

内容的提问来源于stack exchange，提问作者newton1321