Redux Toolkit添加评论后状态更新但组件未重渲染如何解决

• 核心原因：你的组件渲染评论时使用的是useSelector(getMovie)获取独立的movie对象，但addComments reducer仅更新了state.movies数组中的对应电影数据，完全没有同步修改state.movie的值，因此movie引用未发生变化，组件不会触发重渲染。
• 次要问题：当前useEffect依赖设置错误，你将movies作为依赖项，每次movies更新都会触发接口请求拉取电影详情，调用addMovie会用接口返回的旧数据覆盖你刚更新的评论内容，即使修改了reducer也会被旧数据冲掉。
• 扩展问题：你当前直接将comments赋值为单条评论字符串，如果需要支持多条评论存储，应该用数组格式存储。

1. 修改slice中的addComments reducer #

同步更新state.movie的内容：

addComments: (state, action) => {
    let author = action.payload.fromData.yourName;
    let comment = action.payload.fromData.yourComment;
    let movieId = action.payload.id;
    let moviesArr = action.payload.movies;
    let obj = moviesArr.find((item) => item.id == movieId);
    // 如果需要支持多条评论，替换为如下写法：
    // let newObj = {...obj, comments: [...(obj.comments || []), {author, content: comment}]}
    let newObj = {...obj, comments: comment}

    const newArr = moviesArr.map(o => {
        if (o.id === newObj.id) {
            return newObj;
        }
        return o;
    })
    state.movies = newArr;
    // 新增：同步更新当前展示的movie对象
    if (state.movie.id == movieId) {
        state.movie = newObj
    }
}

2. 修正组件useEffect的依赖项 #

仅在电影id变化时拉取详情，避免不必要的接口请求覆盖数据：

useEffect(() => {
    fetchMovieById(id)
    .then((response) => dispatch(addMovie(response)))
}, [id, dispatch]) // 把依赖从movies改成id和dispatch

修改完成后提交评论，redux中movie对象的comments字段会同步更新，useSelector会检测到movie的引用变化，自动触发组件重渲染，页面会正常展示最新评论，不需要手动触发组件重渲染。

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