React动态渲染含useState的组件触发Hook报错，求正确实现范式

问题根源 #

你动态渲染时的核心错误是直接调用组件函数Condition()并将结果存入状态，这违反了React组件渲染规则：React组件必须通过JSX标签（<Condition />）由React引擎处理渲染，直接执行函数会导致Hook脱离React上下文管理，引发异常。

另外你的Condition组件本身还有个小bug：第一个ReactSelect的onChange回调里，错误使用了未定义的value参数，应该用选中项的value去获取对应的选项数组。

修正后的Condition组件 #

import { useState } from 'react';
import Row from 'react-bootstrap/Row';
import Form from 'react-bootstrap/Form';
import ReactSelect from 'react-select';

const Condition = () => {
    const [selectables, setSelectables] = useState([]);
    // 后续可通过props传入
    const vals = {
        "Fruit" : ["Apple", "Orange"],
        "Vegetable" : ["Cucumber", "Celery", "Onion"],
    };

    const filterSelectablesOnClick = (selectedValues) => {
        const newState = selectedValues.map(item => ({ label: item, value: item }));
        setSelectables(newState);
    };

    const valKeys = Object.entries(vals).map(([key]) => ({ label: key, value: key }));

    return (
        <Row>
            <div className="col-md-4">
                <ReactSelect
                    options={valKeys}
                    onChange={(selected) => {
                        // 修正：通过选中项的value获取对应的数组
                        filterSelectablesOnClick(vals[selected.value]);
                    }}
                />
            </div>
            <div className="col-md-4">
                <Form.Select aria-label="Default select example" className="form-select flex-grow-1">
                    <option>Choose one...</option>
                    <option value="is">is</option>
                    <option value="is-not">is-not</option>
                </Form.Select>
            </div>
            <div className="col-md-4">
                <ReactSelect
                    options={selectables}
                    isMulti
                    placeholder="Select comestible..."
                />
            </div>
        </Row>
    );
}

export default Condition;

正确的动态渲染方式 #

父组件不要存储组件实例，而是存储用于标识组件数量/实例的简单数据，渲染时通过map生成<Condition />标签：

import { useState } from 'react';
import Condition from './Condition';

const ParentComponent = () => {
    // 用数组存储组件标识，而非组件实例
    const [conditions, setConditions] = useState([]);

    const increaseConditionCount = () => {
        // 用时间戳生成唯一ID，避免index作为key的潜在问题
        setConditions(prev => [...prev, { id: Date.now() }]);
    };

    return (
        <div>
            <button onClick={increaseConditionCount}>添加条件</button>
            {conditions.map((item) => (
                <Condition key={item.id} />
            ))}
        </div>
    );
}

export default ParentComponent;

方案优势 #

1. 状态存储数据而非组件实例，符合React状态管理原则
2. 每个<Condition />由React负责渲染，组件实例自动拥有独立的selectables状态，互不干扰
3. 用唯一ID作为key，避免使用index导致的动态增删时组件状态混乱问题

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