React函数组件中For循环仅渲染单个产品行的问题排查

你的for循环里，第一次执行到return语句就直接退出了整个组件函数，所以不管numberOfProducts设为多少，只会返回第一行产品的JSX，循环根本没机会跑完。

不需要单独拆分函数，直接用这两种方式就能解决：

方式一：用数组map生成（React推荐写法） #

export default function ProductInformations(props: TProductInformations) {
    const [numberOfProducts, setNumberOfProducts] = useState<number>(2);

    const handleNumberOfProducts = (type: string) => {
        // 用函数式更新避免闭包问题
        if (type === "add") setNumberOfProducts(prev => prev + 1);
        if (type === "remove") setNumberOfProducts(prev => prev - 1);
    };

    return (
        <div>
            {/* 生成对应数量的产品行 */}
            {Array.from({ length: numberOfProducts }).map((_, index) => (
                <div key={index}>
                    {/* 这里放你的产品行JSX：名称、价格、数量等 */}
                    <p>产品名称</p>
                    <p>价格</p>
                    <p>数量</p>
                </div>
            ))}
            {/* 操作按钮 */}
            <button onClick={() => handleNumberOfProducts("add")}>添加产品</button>
            <button 
                onClick={() => handleNumberOfProducts("remove")} 
                disabled={numberOfProducts <= 1}
            >移除产品</button>
        </div>
    );
}

方式二：用数组存储循环生成的JSX #

如果偏爱for循环的写法，可以先把所有产品行存进数组，最后统一返回：

export default function ProductInformations(props: TProductInformations) {
    const [numberOfProducts, setNumberOfProducts] = useState<number>(2);

    const handleNumberOfProducts = (type: string) => {
        if (type === "add") setNumberOfProducts(prev => prev + 1);
        if (type === "remove") setNumberOfProducts(prev => prev - 1);
    };

    const productRows = [];
    // 注意这里用i < numberOfProducts，避免多生成一行
    for (let i = 0; i < numberOfProducts; i++) {
        productRows.push(
            <div key={i}>
                {/* 你的产品行JSX */}
                <p>产品名称</p>
                <p>价格</p>
                <p>数量</p>
            </div>
        );
    }

    return (
        <div>
            {productRows}
            <button onClick={() => handleNumberOfProducts("add")}>添加产品</button>
            <button 
                onClick={() => handleNumberOfProducts("remove")} 
                disabled={numberOfProducts <= 1}
            >移除产品</button>
        </div>
    );
}

• 状态更新用prev => prev +1这种函数式写法，能避免闭包导致的状态更新不及时问题。
• 循环生成的JSX必须加唯一key属性，帮助React高效渲染。
• 给移除按钮加disabled条件，防止产品数量变成负数。

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