使用包装组件时useState与onChange状态更新失效问题

1. 闭包陷阱导致状态更新失效 #

你在点击按钮时将输入框JSX存入modalContents状态，此时输入框的onChange事件会捕获当前时刻的formInfo和setFormInfo闭包。后续组件重新渲染时，modalContents里的输入框依然绑定的是旧的闭包——也就是说，setFormInfo更新的是当时的状态快照，而非最新的组件状态，自然无法触发formInfo的更新。

2. 存储JSX作为状态的反模式 #

React的状态设计初衷是存储数据而非UI元素（JSX）。JSX是组件渲染的描述结果，当你把它存在state里，它就会被冻结在创建时的状态，不会随着组件的重新渲染而同步更新。哪怕formInfo后续发生变化，modalContents里的输入框也不会重新生成，始终使用最初绑定的事件处理逻辑。

3. 组件渲染时机不匹配 #

当你通过setModalContents存入输入框JSX后，模态框显示的是这份静态的UI描述。而组件的状态更新需要触发重新渲染来同步UI，你的写法相当于把输入框从组件的正常渲染流程中剥离了出来，它不再参与组件的渲染周期，自然无法感知到formInfo的变化。

正确做法：避免存储JSX，用children传递内容 #

不要把输入框JSX存在状态里，而是让模态框组件通过children接收动态内容，这样每次组件渲染时都会生成最新的输入框，绑定最新的setFormInfo。

示例代码：

// 模态框包装组件
const Modal = ({ isVisible, onClose, children }) => {
  if (!isVisible) return null;
  return (
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
        <button onClick={onClose}>关闭</button>
      </div>
    </div>
  );
};

// 表单组件
const Form = () => {
  const [formInfo, setFormInfo] = useState({ name: '' });
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleInputChange = (e) => {
    setFormInfo(prev => ({ ...prev, name: e.target.value }));
  };

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>打开模态框</button>
      <Modal isVisible={isModalOpen} onClose={() => setIsModalOpen(false)}>
        {/* 直接在模态框内部写输入框，而非存入状态 */}
        <input
          type="text"
          value={formInfo.name}
          onChange={handleInputChange}
          placeholder="输入姓名"
        />
      </Modal>
    </div>
  );
};

替代方案：渲染props模式（适配复杂动态内容） #

如果需要动态生成模态框内容，可以让模态框接收一个renderContent函数，在模态框内部调用该函数，确保每次渲染都能获取最新的状态和方法：

const Modal = ({ isVisible, onClose, renderContent }) => {
  if (!isVisible) return null;
  return (
    <div className="modal-overlay">
      <div className="modal-content">
        {renderContent()}
        <button onClick={onClose}>关闭</button>
      </div>
    </div>
  );
};

// 表单组件中使用
<Modal 
  isVisible={isModalOpen} 
  onClose={() => setIsModalOpen(false)}
  renderContent={() => (
    <input
      type="text"
      value={formInfo.name}
      onChange={handleInputChange}
      placeholder="输入姓名"
    />
  )}
/>

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