React/Redux问题：无法检测到状态变更

看起来你遇到的是Redux开发中很常见的“状态更新了但组件没刷新”的问题，结合你描述的「首次打开不显示、返回再打开正常」的场景，大概率是状态更新的不可变性没做好，或者组件初始化时的异步逻辑没触发到位，咱们一步步排查解决：

1. 先排查Reducer的Object.assign写法是否正确 #

Redux依赖浅比较来检测状态变化，如果你的Reducer没有返回新的状态对象引用，哪怕内部属性变了，Redux也会认为状态没更新，组件自然不会重新渲染。

举个错误的反例：

// ❌ 错误：直接修改原state后返回，引用没变
function commentReducer(state = initialState, action) {
  switch(action.type) {
    case 'LOAD_COMMENTS':
      Object.assign(state, { comments: action.payload });
      return state;
    default:
      return state;
  }
}

正确的写法必须返回新对象：

// ✅ 正确：用Object.assign创建新对象
function commentReducer(state = initialState, action) {
  switch(action.type) {
    case 'LOAD_COMMENTS':
      return Object.assign({}, state, { comments: action.payload });
      // 或者用ES6扩展运算符更简洁：
      // return { ...state, comments: action.payload };
    default:
      return state;
  }
}

如果你的状态是嵌套结构（比如post.comments），还要确保嵌套层级的对象也返回新引用：

// 比如更新post下的评论时
function postReducer(state = initialState, action) {
  switch(action.type) {
    case 'ADD_COMMENT':
      return {
        ...state,
        currentPost: {
          ...state.currentPost,
          comments: [...state.currentPost.comments, action.payload]
        }
      };
    default:
      return state;
  }
}

2. 检查容器组件的mapStateToProps映射 #

确保你的容器组件正确订阅了状态变化，并且返回的props是“新鲜”的：

• 如果你的post是从Store中获取的，要保证当post的评论更新时，post本身是新的对象引用（而不是修改原对象的内部属性）
• 避免在mapStateToProps中返回固定引用的对象/数组，比如不要直接返回state.posts.currentPost，如果这个对象引用没变化，组件不会触发更新

示例正确的mapStateToProps：

const mapStateToProps = (state) => {
  return {
    // 确保currentPost是每次更新都返回新引用
    post: state.posts.currentPost,
    // 直接映射评论数组，确保数组是新引用（比如Reducer中用扩展运算符生成）
    comments: state.comments.byPostId[state.posts.currentPost?.id] || []
  };
};

3. 验证组件初始化时的异步逻辑 #

你说首次打开CommentList没显示评论，二次打开正常，很可能是首次打开时没触发加载评论的Action，导致Store里还没有评论数据，而二次打开时评论已经缓存到Store里了。

检查你的容器组件是否在初始化阶段发起请求：

class CommentListContainer extends React.Component {
  componentDidMount() {
    // 确保这里用当前post的id触发加载评论的Action
    if (this.props.post?.id) {
      this.props.loadComments(this.props.post.id);
    }
  }

  // 如果post是从props传入的，还要监听post变化重新加载
  componentDidUpdate(prevProps) {
    if (prevProps.post?.id !== this.props.post?.id) {
      this.props.loadComments(this.props.post.id);
    }
  }

  render() {
    return <CommentList comments={this.props.comments} />;
  }
}

// 别忘了connect绑定Action Creator
export default connect(mapStateToProps, { loadComments })(CommentListContainer);

4. 纯组件的额外注意点 #

如果你的CommentList是React.PureComponent或者用了React.memo，它会通过浅比较props来决定是否渲染。这时候如果你的props引用没变化（比如评论数组还是同一个引用），哪怕内部数据变了，组件也不会更新。这种情况下，一定要保证Reducer中更新评论时返回新的数组（比如用[...oldComments, newComment]）。

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