React子组件未重新渲染：模态框Select值无法实时更新

问题原因 #

你使用的Modal.render()是命令式的模态框调用方式，它会一次性生成模态框DOM并挂载到页面上，完全脱离父组件的渲染流程。当父组件的filterYear或filterFilingType状态变化时，已经渲染完成的模态框不会自动感知并重新渲染，只有关闭后重新打开才会读取最新状态。

解决方案 #

方案1：改用声明式组件写法（推荐） #

放弃命令式的Modal.render()，将模态框作为父组件的一部分进行声明式渲染，这样状态变化时会自动触发模态框的重新渲染。

修改后代码示例：

// 父组件新增模态框显示状态
const [isModalOpen, setIsModalOpen] = useState(false);

// 触发按钮
<Button onClick={() => setIsModalOpen(true)}>
  create
</Button>

// 声明式模态框组件
{isModalOpen && (
  <Modal
    title={t('createFiling')}
    visible={isModalOpen}
    onClose={() => setIsModalOpen(false)}
    shouldShowActions={false}
  >
    <InlineGroup>
      <Inputs.Select
        placeholder={t('selectFilingYear')}
        list={filterData.filterYears}
        onChange={setFilterYear}
        value={filterYear}
      />
      <Inputs.Select
        placeholder={t('selectFilingType')}
        list={filterData.filingTypes}
        onChange={setFilterFilingType}
        value={filterFilingType}
      />
    </InlineGroup>
  </Modal>
)}

方案2：保留命令式调用时手动更新模态框 #

如果必须使用Modal.render()，需要监听状态变化并手动更新模态框内容。前提是你的UI库提供了模态框的更新API。

修改后代码示例：

import { useEffect, useRef } from 'react';

// 保存模态框实例引用
const modalInstanceRef = useRef(null);

// 抽离模态框内容为独立函数
const getModalContent = () => (
  <InlineGroup>
    <Inputs.Select
      placeholder={t('selectFilingYear')}
      list={filterData.filterYears}
      onChange={setFilterYear}
      value={filterYear}
    />
    <Inputs.Select
      placeholder={t('selectFilingType')}
      list={filterData.filingTypes}
      onChange={setFilterFilingType}
      value={filterFilingType}
    />
  </InlineGroup>
);

const showModal = () => {
  modalInstanceRef.current = Modal.render({
    title: t('createFiling'),
    content: getModalContent(),
    shouldShowActions: false,
  });
};

// 监听状态变化，更新模态框
useEffect(() => {
  if (modalInstanceRef.current) {
    // 假设UI库的Modal实例提供update方法来更新内容
    modalInstanceRef.current.update({
      content: getModalContent()
    });
  }
}, [filterYear, filterFilingType, filterData, t]);

注意：方案2依赖UI库的具体API，如果你的Modal组件没有提供更新方法，此方案无法生效，因此优先推荐方案1的声明式写法。

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