React父组件创建子组件时状态被覆盖问题求助

原因分析 #

• 核心问题是闭包捕获了旧的组件状态。你的createInnerRange函数在组件渲染时被创建，它会捕获当时的state变量。当你点击新生成的Level组件按钮时，这个函数里的state还是它被创建时的旧值，并非当前最新的组件状态。
• 这就导致每次调用addLevel时，[...state.levels, props]使用的是旧的levels数组，而不是最新的数组。新的状态更新会基于旧状态覆盖之前的变更，最终表现为新创建的列表覆盖了刚生成的第一个列表。

修复方案 #

把addLevel中的setState改为函数式更新，让React传入最新的状态快照，避免闭包带来的旧状态问题：

const addLevel = (props: LevelProps) => {    
  console.log('add level called');
  setState(prevState => ({
    ...prevState,
    levels: [...prevState.levels, props]
  }))
}

函数式更新的优势在于，React会确保prevState始终是当前组件的最新状态，无论你的回调函数何时触发，都能基于正确的状态进行追加操作，彻底解决覆盖问题。

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