React中useState持旧值不更新、useEffect失效时如何强制组件重渲染

你遇到的状态不同步问题，本质不是React缓存旧数据，是你当前的代码存在两个直接导致逻辑失效的硬伤：

• useState解构错误：你写的const [selectFolderId, useSelectFolderId] = React.useState(documentStore.id) 里，useState返回的第二个参数是状态更新函数，你后续在useEffect中调用的setFolderId()根本不是这个解构出来的更新方法，等于从来没有真正触发过状态更新，状态自然一直保留首次挂载时取的旧值。
• 依赖判定失效：如果从Redux取documentStore时没有精准订阅id字段，而是拉取了整个store对象，当Redux的不可变更新逻辑不规范、对象引用未发生变化时，React比对useEffect依赖时会判定值没有变动，连带副作用也不会执行。

• 彻底移除冗余本地状态，直接使用Redux派生值
  这是成本最低、最不容易出问题的解法：documentStore.id本身已经存在于Redux全局存储，完全没必要在组件内通过useState复制一份状态存到本地。直接通过selector精准订阅这个值即可：
  const selectFolderId = useSelector(state => state.documentStore.id)
  整个流程没有本地状态拷贝，Redux更新时组件会自动拿到最新的id值触发重渲染，不存在旧值残留的问题，也不需要任何手动同步逻辑。
• 通过key强制组件重挂载完成状态重置
  如果你确实需要在本地对selectFolderId做交互修改（比如允许用户手动切换其他文件夹，不直接对齐全局值），只需要在渲染当前组件时，给它绑定和documentStore.id强关联的key值即可：
  <YourTargetComponent key={documentStore.id} />
  只要全局的id发生变更，React会直接销毁旧的组件实例，重新挂载全新的组件。新组件在初始化useState时，会自动取到最新的documentStore.id作为初始值，完全不需要写useEffect做同步，从根源上避免旧状态残留的问题。
• 无修改需求时直接用useMemo派生取值
  如果你只是需要在组件内多处使用这个id值，不需要对它做本地修改，直接用useMemo生成派生值即可：
  const selectFolderId = useMemo(() => documentStore.id, [documentStore.id])
  不需要用useState存储，自然不会有状态不同步的问题。

很多React开发者遇到这类问题时，会本能以为是React的状态缓存机制导致的，实际上90%以上的场景，都是“全局状态冗余拷贝到本地、setState方法名写错、依赖比对因引用问题失效”导致的，和React本身的设计逻辑无关。

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