ReactJS组件接收数据后不更新：直接访问文章详情页加载异常

API 探路者

2026-5-28

问题诊断与修复方案

嘿，这个问题的根源其实是Reducer中存储文章数据的key设置错误，导致组件从Redux Store里取不到对应的文章数据，所以一直停留在Loading状态。

问题分析

先看你的Reducer代码：

export default function(state = {}, action) {
  switch (action.type) {
    case FETCH_POST:
      // 这里的key是整个post对象，完全错误！
      return { ...state, [action.payload.data]: action.payload.data };
    default:
      return state;
  }
}

你把完整的post对象当成了state对象的key，而JavaScript对象的key只能是字符串/Symbol，这里会把对象强制转为[object Object]，导致你的state.posts里根本没有以文章ID（比如2357）为key的条目。

但你的mapStateToProps是通过文章ID来取数据的：

function mapStateToProps({ posts }, ownProps) {
  return { post: posts[ownProps.match.params.id] };
}

这就导致直接访问URL时，post始终是undefined，组件一直渲染<Loader />。

至于从首页跳转正常的原因：首页的文章列表应该已经把数据以正确的ID为key存入了Store，所以跳转后能直接拿到数据；而直接访问URL时是单独请求这篇文章，Reducer存错了key，自然拿不到。

修复代码

只需要修改Reducer，把存储的key改成文章的ID即可：

export default function(state = {}, action) {
  switch (action.type) {
    case FETCH_POST:
      // 用文章ID作为key存储数据
      return { ...state, [action.payload.data.id]: action.payload.data };
    default:
      return state;
  }
}