React Redux 编辑帖子组件 useEffect 依赖引发 state 取值未定义及同步异常

你碰到的两个现象，是三处逻辑bug叠出来的，不是单纯的渲染时序问题：

• 空依赖Effect同步失效的本质
  清空Effect依赖之后，回调只会在组件挂载时执行一次。第一次执行时Redux里的post详情还是初始空值，此时确实会正常dispatch拉取详情的action；但等接口返回、Redux状态更新后，因为Effect没有监听post的变化，同步内部state的分支根本不会被触发，自然没法把Redux里的字段同步到组件的useState里。
• 带依赖时抛title未定义的本质
  你在Effect里写的post有效性判断，没有做空值兜底：初始状态下Redux的post值一般是空对象、null甚至undefined，这时候直接读post.title、post._id就会直接抛出读取未定义属性的错误——哪怕后续接口返回了正确数据，只要前面的空值判断触发了错误，整个Effect的执行链路就会直接中断。你看到“Redux action已经成功返回数据”，其实是后续其他逻辑触发的请求，不是当前Effect正常流程发出的请求。
  再叠加你本身的加载判断写反了：

  你写的加载条件是loading && loadingUpdate，意思是只有详情加载、更新加载同时为真的时候才显示加载组件。但实际业务里，组件刚挂载时loadingUpdate默认是false，哪怕此时loading为true（详情正在请求），整个条件判断也会直接走到渲染表单的分支，根本不会等详情加载完成。你怀疑的“组件先于Redux载荷返回就渲染”，就是这个bug直接导致的。

• 输入逻辑的隐藏bug
  Textarea、图片输入框的onChange事件绑了e.target.checked，这是复选框的取值属性，普通文本输入框应该取e.target.value，不然输入时根本没法正常更新内部state。

• 给post判断加空值兜底，把Effect里的判断逻辑从原来的

  if (!post.title || post._id !== postId)
  

  改成先校验post本身的存在性，再读具体字段：

  if (!post || !post.title || post._id !== postId)
  

  就算初始状态post是null/undefined，也会直接走dispatch拉取详情的分支，不会提前抛读属性的错误。
• 修正加载态的判断逻辑，把原来的&&改成||：只要详情加载、更新加载任意一个为真，就显示Loader，保证只有两个加载流程都结束的时候，才渲染表单，避免post还没加载完就提前渲染。

  {loading || loadingUpdate ? (
    <Loader />
  ) : error ? (
    <Message status="error">{error}</Message>
  ) : (
    /* 原表单内容保持不变 */
  )}
  

• 修正输入框的取值逻辑，把Textarea和图片Input的onChange从e.target.checked改成e.target.value，保证输入时能正常更新对应的state。
• 现有Effect的依赖项不用改，加了空值兜底之后不会出现重复dispatch的问题：判断逻辑里已经加了post._id === postId的校验，只有当post匹配到当前路由id的时候，才会执行同步state的操作，否则就重新发请求拉取对应id的详情。

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