React中useState初始值在组件重渲染后未更新问题求助

根因 #

• React.useState 接收的初始值仅会在组件第一次挂载时生效，后续组件重渲染时，新的初始值不会覆盖现有state。
• 你遇到该问题的核心是弹窗关闭时没有销毁 EditTagsModal 组件实例，旧的selectedTags状态被保留。再次打开弹窗时，虽然existingTags props已经更新为服务端返回的去重后的值，但useState不会主动同步props到state，所以selectedTags还是旧值。

解决方案 #

方案1：关闭弹窗时卸载组件 #

调整父组件的弹窗显隐逻辑，关闭弹窗时将控制渲染的变量（即你代码里的tags或者对应控制弹窗是否渲染的布尔值）设为假值，触发组件卸载。下次打开时组件重新挂载，useState会自动读取最新的existingTags作为初始值。

方案2：监听props变化手动同步state #

在EditTagsModal组件内添加useEffect监听existingTags的变化，主动更新selectedTags：

useEffect(() => {
  setSelectedTags(existingTags)
}, [existingTags])

方案3：绑定key强制组件重置 #

给EditTagsModal组件绑定和existingTags关联的key属性，只要existingTags发生变化，React会自动销毁旧组件实例、创建新实例，state会自动重置为最新的初始值：

{tags && <EditTagsModal existingTags={tags} key={JSON.stringify(tags)} />}

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