React回调函数内触发状态组件重渲染的问题及解决思路

你当前实现的核心问题是将JSX组件实例直接存储在state中，这些实例在创建时会捕获当时的selectedOptions闭包值。后续selectedOptions更新时，缓存的JSX不会重新生成，导致input始终显示旧的ID，无法同步状态变化。

不要存储组件实例，而是通过状态跟踪组件数量，在渲染阶段动态生成组件；同时将子组件拆分为独立单元，通过props传递最新状态和回调，彻底避免闭包陷阱。

import { useState } from 'react';

// 独立子组件，通过props获取最新状态与回调
const TestComponent = ({ 
  index, 
  selectedOption, 
  options, 
  onOptionChange 
}) => {
  return (
    <div className="flex flex-row gap-5" id={`${index}`}>
      <select
        value={selectedOption.id}
        onChange={(e) => {
          const selectedId = Number(e.target.value);
          const matchedOption = options.find(opt => opt.id === selectedId);
          if (matchedOption) {
            onOptionChange(index, matchedOption);
          }
        }}
      >
        {options.map(option => (
          <option key={option.id} value={option.id}>
            {option.name}
          </option>
        ))}
      </select>
      <input readOnly value={selectedOption.id} />
    </div>
  );
};

export default function CreateTestComponent() {
  const options = [
    { id: 1, name: "Test 1" },
    { id: 2, name: "Test 2" },
    { id: 3, name: "Test 3" }
  ];

  // selectedOptions数组长度对应组件数量，每个元素对应组件的选中项
  const [selectedOptions, setSelectedOptions] = useState([options[0]]);

  // 添加新组件：追加默认选中项
  const handleAddComponent = () => {
    setSelectedOptions(prev => [...prev, options[0]]);
  };

  // 更新指定索引组件的选中项
  const handleOptionChange = (index: number, newOption: typeof options[0]) => {
    setSelectedOptions(prev => {
      const updated = [...prev];
      updated[index] = newOption;
      return updated;
    });
  };

  return (
    <>
      <button 
        type="button" 
        onClick={handleAddComponent}
        className="bg-black text-white rounded px-3 py-1"
      >
        Add a Component
      </button>
      <div>
        <h1>Component testing!</h1>
        <ul className="list-none">
          {/* 动态渲染组件，确保每次都拿到最新状态 */}
          {selectedOptions.map((option, index) => (
            <li key={index}>
              <div className="flex flex-row gap-5">
                <TestComponent
                  index={index}
                  selectedOption={option}
                  options={options}
                  onOptionChange={handleOptionChange}
                />
              </div>
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}

• 拆分独立子组件：将原testComponent转为独立的TestComponent，通过props接收状态和回调，确保子组件始终能获取最新的selectedOption值。
• 移除组件缓存逻辑：删除components和testComponentIndex状态，改用selectedOptions的长度控制组件数量，每次渲染动态生成子组件，避免闭包捕获旧状态。
• 简化状态更新逻辑：添加组件时直接向selectedOptions追加默认选项；更新选中项时通过索引修改对应位置的值，保证状态更新的不可变性。
• 修复select选中状态：给select设置value属性，确保UI选中状态与selectedOption完全同步。

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