Redux Toolkit状态不更新求助：接口取数后组件未同步状态

核心问题：Redux状态未正确更新 #

你的posts slice里的setPosts reducer写法错误，直接赋值state = action.payload不会触发Redux的状态更新。Redux Toolkit依赖Immer处理不可变状态，这种赋值方式只是修改了局部变量的引用，并没有改变Immer追踪的原状态数组。

修复Reducer代码 #

将posts.js中的setPosts reducer改成以下两种方式之一：

方式1：直接返回新状态数组 #

setPosts: (state, action) => {
  console.log(action.payload);
  return action.payload;
}

方式2：使用Immer的可变操作（清空原数组并添加新元素） #

setPosts: (state, action) => {
  state.splice(0, state.length); // 清空原数组
  state.push(...action.payload); // 插入新的帖子数据
  console.log(state);
}

补充修复：Feed组件的依赖问题 #

你的useEffect依赖数组为空，但内部用到了user变量，这会导致组件挂载时如果user还未初始化，请求会因user.token不存在而失败。同时React Hooks会提示依赖缺失警告，需要把user和dispatch添加到依赖数组：

useEffect(()=>{
  const postsFetch = async () => {
    if (!user?.token) return; // 确保token存在再发起请求
    const res = await fetch("/api/posts?author&likes",{
      headers:{
        "authorization": "Bearer "+user.token,
        "Content-Type":"application/json",
      }
    })
    const data = await res.json();
    dispatch(postActions.setPosts(data))
  }
  postsFetch();
},[user, dispatch])

另外，Feed组件里的div标签用了class，React中应该用className：

<div className="container pt-4 pb-4">

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