Redux Toolkit中deletePost的action.payload为undefined问题求助

我在React应用中实现帖子删除功能，控制台显示deletePost方法的action.payload是undefined，但addPost函数里的action.payload是正常定义的。我是React和Redux Toolkit的初学者，搞不懂问题出在哪，附上相关代码片段，恳请帮忙解释原因。

1. postsSlice代码 #

import { createSlice, nanoid } from '@reduxjs/toolkit';
import { sub } from 'date-fns';

const initialState = {
  posts: [],
};

const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {
    addPost: (state, action) => {
      state.posts.push(action.payload);
    },
    // deletePost 
    deletePost: (state, action) => { 
      console.log(`action.payload is: ${ action.payload }`);
      console.log(action);
    },
  },
});

export const selectAllPosts = (state) => state.posts.posts;

export const {
  addPost,
  deletePost,
} = postsSlice.actions;

export default postsSlice.reducer;

2. 调用deletePost的PostsList组件代码 #

import { useSelector, useDispatch } from "react-redux";
import { deletePost } from "../../features/posts/postsSlice";

const PostsList = () => {
  const posts = useSelector(selectAllPosts);
  const dispatch = useDispatch();

  const postInDescendingOrder = posts.slice().sort().reverse();

  const handlePostDeletion = () => { 
    dispatch(deletePost( posts.id ));
  };

  const renderedPosts = postInDescendingOrder.map((post) => (
    <article className="post-excerpt" key={post.id}>
      <h3>{post.title}</h3>
      <p className="post-content">{post.content}</p>
      <div className="action-buttons">
        <button className="delete" onClick={ handlePostDeletion }>Delete</button>
      </div>
    </article>
  ));

  return (
    <section className="posts-list">
      <h2>All Available Posts</h2>
      {posts.length > 0 ? renderedPosts : <p className="no-post">No Post to Display</p>}
    </section>
  );
};

export default PostsList;

问题原因 #

1. 传参错误：你调用deletePost时传的是posts.id，但posts是一个数组，数组本身没有id属性，所以传入的是undefined，直接导致action.payload为undefined。
2. 事件绑定错误：handlePostDeletion没有绑定当前要删除的帖子，每个删除按钮应该对应自己的帖子ID，而不是去拿整个数组的不存在的属性。

修复方案 #

1. 修改handlePostDeletion，让它接收帖子ID作为参数：

const handlePostDeletion = (postId) => { 
  dispatch(deletePost(postId));
};

2. 在渲染按钮时，传入当前帖子的id：

<button className="delete" onClick={() => handlePostDeletion(post.id)}>Delete</button>

3. 完善deletePost的reducer逻辑，过滤掉要删除的帖子：

deletePost: (state, action) => { 
  state.posts = state.posts.filter(post => post.id !== action.payload);
},

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