即使我成功地从API获取帖子并使用Dispatcher将响应保存到状态.该州没有更新.在Feed中,它显示没有找到Posts,但在posts.js(第11行)中,它使用Posts数组控制台记录状态

Feed.js

export default function Feed() {

  const dispatch = useDispatch();
  useEffect(()=>{
    const postsFetch = async () => {
      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();
  },[])
  const contextPosts = useSelector(s=>s.posts)
  const user = useSelector(s=>s.user)
  console.log(user)
  console.log(contextPosts)
  return (
    <div class="container pt-4 pb-4">
      {contextPosts.length == 0 && <h5 className="text-muted">No posts found</h5> }
      {contextPosts.map(d=>(
      <Post data={d} />
      ))}
    </div>
  );
}

posts.js | posts slice

import { createSlice } from "@reduxjs/toolkit";

let initialState = []

export const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {
    setPosts: (state, action) => {
      state = action.payload;
      console.log(state)
    },
  },
});

// Action creators are generated for each case reducer function
export const postActions = postsSlice.actions;

export default postsSlice.reducer;

推荐答案

在Redux-Toolkit状态片缩减器中,您应该mutate状态对象101,return下一个状态对象引用(102).Reducer代码的问题在于,您只是重新分配了州引用.有关更多详细信息,请参见Direct State Mutation.

示例:

const initialState = {
  property: { ... }
};
  • 更改状态引用

    export const stateSlice = createSlice({
      name: "state",
      initialState,
      reducers: {
        state行动: (state, action) => {
          state.property = action.payload;
        },
      },
    });
    
  • 返回新的状态引用

    export const statesSlice = createSlice({
      name: "state",
      initialState,
      reducers: {
        state行动: (state, action) => {
          return {
            ...state,
            property: action.payload;
          };
        },
      },
    });
    

因为你的postSlice中的状态是一个数组,你不能改变它,所以你将是returning,action.payload,as下一个状态.

export const postsSlice = createSlice({
  name: "posts",
  initialState,
  reducers: {
    setPosts: (state, action) => {
      return action.payload;
    },
  },
});

您还应该记住,在RTK切片缩减器中,您正在编辑状态的草稿副本,因此try 将其设置为console.log(state)不会记录状态,而是记录您正在编辑的草稿代理对象.如果您想要记录中间状态更改,那么使用current,它是从immer库重新导出的current函数.请参见Logging draft state values.

示例:

行动

{
  payload: "bar"
}
import { current } from '@reduxjs/toolkit';

const initialState = {
  property: "foo"
};

...

state行动: (state, action) => {
  console.log(current(state)); // { property: "foo" }
  state.property = action.payload;
  console.log(current(state)); // { property: "bar" }
},

Reactjs相关问答推荐

Shadck/ui Select -当用户 Select 项目时更改状态

避风港访问端口以包含Reaction应用程序

单击按钮时在子元素中不显示任何内容-react

Reactjs中的chartjs和reaction-chartjs-2的问题

下拉Tailwind CSS菜单与怪异beviour

有没有办法在Shopify中显示自定义计算的交货日期?

生成Reaction Vite应用程序的停靠容器时无法识别环境变量

如何动态地改变<; Select >;React和Tailwind元素?

FabricJS反序列化问题

在一个事件处理程序中进行多次调度是个好主意吗?

i18next中复数键的理解

ReactJS on AWS Amplify与EC2上的Spring boot服务之间的混合内容错误

React设置上下文并进行导航

React - 使用 useEffect 还是直接在 onChange 方法中更改值对性能最好?

如何通过单击多个选项中的特定项目在模态上呈现不同的标题?

setState 改变对象引用

NextJs - 如何从站点 map 生成器中删除重复的 URL?

为什么重新渲染不会影响 setTimeout 的计数?

ReactJS:按钮启用禁用更改 colored颜色

React - useParams() 不会失败 null / undefined 判断