如何更新定义在函数返回外的Mantine UI选择组件？

场景：模态框中根据用户选择切换Mantine UI的Select组件，点击「按县选择」时默认禁用County MultiSelect；选择州后过滤县数据并更新状态，希望County MultiSelect解除禁用并更新选项。将组件放在return内时正常，但提前在return外定义组件后，无法更新disabled属性和选项数据。

原有代码：

// 提前定义组件实例
const hucSelect = (
    <Select
        label='Watershed Layers'
        placeholder='Select One'
        data={[
            { value: 'huc2', label: 'HUC2' },
            { value: 'huc4', label: 'HUC4' },
            { value: 'huc6', label: 'HUC6' },
            { value: 'huc8', label: 'HUC8' },
        ]}
    />
);

const countySelect = (
    <MultiSelect
        label='County'
        disabled={countiesDisabled}
        data={filteredCounties}
    />
);

const stateSelect = (
    <Select
        label='States'
        placeholder='Select One'
        data={states}
        onChange={(_value) => filterCounties(_value)}
    />
);

// 根据单选切换组件
useEffect(() => {
    switch (aoiChoice) {
        case 'state':
            setSelectOptions([stateSelect]);
            break;
        case 'county':
            const options = [stateSelect, countySelect];
            setSelectOptions(options);
            break;
        default:
            setSelectOptions([hucSelect]);
            break;
    }
}, [aoiChoice]);

// 渲染组件
{selectOptions.map((option) => {
    return option;
})}

原因分析 #

提前在return外定义的组件实例，只会在组件第一次渲染时创建一次。后续countiesDisabled、filteredCounties等状态变化时，这些预定义的组件不会重新生成，props自然不会同步更新，导致界面无变化。

解决办法 #

方法1：将组件定义为函数，按需调用生成新实例 #

把每个Select/MultiSelect包装成函数，每次需要时调用函数生成新的JSX元素，确保状态变化时组件能重新渲染并获取最新props：

// 定义组件生成函数
const renderHucSelect = () => (
    <Select
        key='huc'
        label='Watershed Layers'
        placeholder='Select One'
        data={[
            { value: 'huc2', label: 'HUC2' },
            { value: 'huc4', label: 'HUC4' },
            { value: 'huc6', label: 'HUC6' },
            { value: 'huc8', label: 'HUC8' },
        ]}
    />
);

const renderCountySelect = () => (
    <MultiSelect
        key='county'
        label='County'
        disabled={countiesDisabled}
        data={filteredCounties}
    />
);

const renderStateSelect = () => (
    <Select
        key='state'
        label='States'
        placeholder='Select One'
        data={states}
        onChange={(_value) => filterCounties(_value)}
    />
);

// 更新useEffect逻辑，调用函数生成组件
useEffect(() => {
    switch (aoiChoice) {
        case 'state':
            setSelectOptions([renderStateSelect()]);
            break;
        case 'county':
            const options = [renderStateSelect(), renderCountySelect()];
            setSelectOptions(options);
            break;
        default:
            setSelectOptions([renderHucSelect()]);
            break;
    }
}, [aoiChoice, countiesDisabled, filteredCounties]); // 必须添加状态依赖，确保状态变化时重新执行

方法2：直接在渲染时根据类型动态生成组件 #

不提前存储组件实例，而是存储要渲染的组件类型标识，在map渲染时根据标识生成对应组件，确保每次渲染都使用最新状态：

// 存储组件类型标识，而非实例
useEffect(() => {
    switch (aoiChoice) {
        case 'state':
            setSelectOptions(['state']);
            break;
        case 'county':
            setSelectOptions(['state', 'county']);
            break;
        default:
            setSelectOptions(['huc']);
            break;
    }
}, [aoiChoice]);

// 渲染时动态生成组件
{selectOptions.map((type) => {
    switch(type) {
        case 'state':
            return (
                <Select
                    key='state'
                    label='States'
                    placeholder='Select One'
                    data={states}
                    onChange={(_value) => filterCounties(_value)}
                />
            );
        case 'county':
            return (
                <MultiSelect
                    key='county'
                    label='County'
                    disabled={countiesDisabled}
                    data={filteredCounties}
                />
            );
        case 'huc':
            return (
                <Select
                    key='huc'
                    label='Watershed Layers'
                    placeholder='Select One'
                    data={[
                        { value: 'huc2', label: 'HUC2' },
                        { value: 'huc4', label: 'HUC4' },
                        { value: 'huc6', label: 'HUC6' },
                        { value: 'huc8', label: 'HUC8' },
                    ]}
                />
            );
        default:
            return null;
    }
})}

关键注意点 #

• 方法1中，useEffect的依赖项必须包含countiesDisabled、filteredCounties等状态变量，否则状态变化时不会重新生成组件。
• 两种方法都要给每个组件添加唯一的key属性，符合React列表渲染的规范。

内容的提问来源于stack exchange，提问作者bnjmn.myers