React中使用useState搭配三元表达式初始化状态时始终返回默认blankItem的问题

你遇到的状态值始终不随isEdit变化的现象，本质上完全由React useState 的运行规则决定：
useState(initValue) 传入的初始值，仅会在组件第一次挂载的阶段被读取用于初始化状态；组件后续因为prop变化、父组件重渲染触发的更新流程中，传入useState的初始参数会被React直接忽略，全程沿用第一次挂载时缓存的状态值。

基于这个规则，最容易触发你遇到的问题的两类典型场景：

• 父组件没有区分新增/编辑场景的组件标识，React在场景切换时直接复用了之前已挂载的表单组件实例。这个实例第一次挂载时是新增场景，已经把item初始化成了blankItem，哪怕现在传入的isEdit已经变为true，状态初始化逻辑根本不会二次执行，自然item始终是最初的blankItem。
• 编辑场景下的editItem是异步接口加载的数据，组件第一次挂载时接口还未返回结果，此时就算isEdit为true，拿到的editItem是空的兜底值，初始化逻辑实际执行时取到的就是blankItem；后续接口返回真实editItem后，没有触发对应的状态更新流程，item自然停留在初始的blankItem值上。

可以根据你的业务场景选择对应方案：

• 方案1（推荐，代码侵入性最低）：给复用的表单组件加唯一key，强制触发重挂载
  在父组件渲染表单时，根据当前场景传入差异化的key值：
  • 新增场景：<ItemForm key="item-add" isEdit={false} />
  • 编辑场景：<ItemForm key={item-edit-${editItem.id}} isEdit={true} editItem={editItem} />
    key值变化时，React会直接销毁旧的组件实例，重新挂载全新的组件实例，此时会完整跑一遍组件内的状态初始化逻辑，拿到完全匹配当前场景的初始值。这个方案能彻底避免跨场景的状态残留，是复用时最稳妥的实现方式。
• 方案2：通过副作用监听关键依赖，手动同步状态
  如果你不想通过key强制重挂载，可以在组件内部增加监听逻辑，当isEdit、editItem这些核心依赖变化时，手动调用状态更新方法把item同步为对应的值：

  const initValue = isEdit ? editItem : blankItem
  const [item, setItem] = useState(initValue)
  
  // 监听关键依赖变化，同步表单状态
  useEffect(() => {
    setItem(isEdit ? editItem : blankItem)
  }, [isEdit, editItem, blankItem])
  

  这个方案既可以解决组件复用时状态不更新的问题，也能覆盖editItem异步加载晚到的场景——等接口返回真实编辑数据、editItem的引用变化时，会自动把item更新为正确的待编辑值。
• 方案3：拆分渲染时机，等数据就绪再挂载表单
  针对editItem是异步获取的场景，可以增加加载判断：等待编辑的editItem完全加载完成后，再渲染表单组件，避免表单挂载时拿到空的编辑数据导致初始化值错误。

内容的提问来源于stack exchange，提问作者jon-perrett