点击按钮时如何在React组件内渲染新增的React组件？

问题原因 #

• 违反React Hook使用规则：useEffect 只能在组件顶层作用域调用，不能嵌套在普通函数showField中，运行时会触发Hook规则校验错误。
• 状态设计不符合需求：使用布尔类型状态只能控制单个字段的显隐，无法支持每次点击新增多个字段的场景。
• 生成的组件未挂载到JSX树：generateNewField 函数返回的组件实例没有被放到组件return的JSX结构中，自然不会在页面渲染。

修复方案 #

将控制字段的状态修改为数组，每次点击+按钮时往数组中新增一个唯一标识，遍历该数组批量渲染NeededProductsField组件即可。

修复后完整代码 #

AddRecipeForm.js #

import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import { useState } from 'react';
import NeededProductsField from './NeededProductsField';

function AddRecipeForm() {
    // 用数组存储所有新增字段的唯一标识，用于列表渲染的key
    const [productFields, setProductFields] = useState([1]);

    // 点击+按钮新增字段
    const addNewField = () => {
        // 用时间戳作为唯一id，避免key重复
        setProductFields(prev => [...prev, Date.now()]);
    };

    return (
        <Form>
            <Form.Group className="mb-3" controlId="addRecipe">
                <Form.Label>Име на рецептата</Form.Label>
                <Form.Control type="title" placeholder="Добави име" />
            </Form.Group>

            <Form.Group className="mb-3" controlId="neededProducts">
                <Form.Label>Необходими продукти</Form.Label>{' '}
                <Button variant="primary" size="sm" onClick={addNewField}>+</Button>{' '}
                {/* 遍历数组渲染所有食材字段 */}
                {productFields.map(fieldId => (
                    <p key={fieldId}>
                        <NeededProductsField />
                    </p>
                ))}
            </Form.Group>
            
            <Button variant="primary" type="submit">
                Запиши
            </Button>
        </Form>
    );
}

export default AddRecipeForm;

NeededProductsField.js 无需修改 #

import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function NeededProductsField(props) {
    return (
        <Row>
            <Col xs={7}>
            <Form.Control placeholder="Име" />
            </Col>
            <Col>
            <Form.Control placeholder="Количество" />
            </Col>
            <Col>
            <Form.Control placeholder="М. ед." />
            </Col>
        </Row>
    );
}

export default NeededProductsField;

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