React：组件数组映射无法随props更新的问题求助

你当前的核心问题是把JSX组件直接存在了状态里——这些组件在创建时会捕获当时的reflist等props值，形成“快照”。后续父组件的reflist更新时，状态里的JSX不会自动重新生成，React会复用之前创建的组件实例，导致子组件拿不到最新的props。

不要在状态中存储渲染好的组件，而是存储组件的配置标识（比如唯一key），在渲染阶段动态生成组件，这样每次父组件props更新时，都会用最新的值生成子组件。

具体修改步骤 #

1. 修改状态定义：将存储JSX的installpvcomponent改为存储唯一标识数组
2. 调整添加组件逻辑：添加时只往状态里推新的唯一标识
3. 重写渲染逻辑：遍历标识数组，动态传入最新props生成子组件
4. 更新删除逻辑：根据唯一标识删除对应项

修改后代码示例 #

状态定义 #

// 用唯一key数组替代JSX数组，比如用时间戳做key避免重复
const [componentKeys, setComponentKeys] = useState([]);

添加组件的逻辑 #

// 点击按钮添加组件时，只往状态里加新的唯一key
const handleAddComponent = () => {
  setComponentKeys(prevKeys => [...prevKeys, Date.now()]);
};

渲染部分 #

<div id="installpvsup">
  {componentKeys.map((key, index) => (
    <div key={key}>
      <SimulationInstallpvsup
        key={key}
        installPvsup={props.installPvsup}
        handleOnChange={props.handleOnChange}
        inputPlaceholder={inputPlaceholder}
        labelClasses={labelClasses}
        inputClasses={inputClasses}
        totalOfNumbers={totalOfNumbers}
        parentLabelInputDiv={parentLabelInputDiv}
        listeChampsError={props.listeChampsError}
        reflist={reflist} // 这里会自动取最新的reflist值
        index={index}
        handleButtonDel={() => handleButtonDel(key)}
      />
    </div>
  ))}
</div>

删除组件逻辑 #

const handleButtonDel = (targetKey) => {
  setComponentKeys(prevKeys => prevKeys.filter(key => key !== targetKey));
};

• React状态的职责是存储数据，而非UI元素。存储JSX会切断props更新的传导链路，导致组件无法感知父级数据变化。
• 用唯一标识（如时间戳、自增ID）作为组件key，避免使用索引——索引会在删除元素后导致后续组件key混乱，引发不必要的重新渲染或复用错误。

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