我第一次点击删除时，id是未定义的。但是第二次点击时id可用，它删除了项目。
Feed.js:

const Feed = ({ username }) => {
  const dispatch = useDispatch();
  const { _id, username: currentUsername } = useSelector(
    (state) => state.auth.user
  );
  const { posts } = useSelector((state) => state.post);

  const fetchPosts = async () => {
    username ? dispatch(getProfilePosts(username)) : dispatch(getTimeline(_id));
  };

  useEffect(() => {
    fetchPosts();
  }, [username, _id, dispatch]);

  const handleDelete = async (id) => {
    dispatch(deletePost(id));
    fetchPosts();
  };

  return (
    <div className="feed">
      <div className="feed-wrapper">
        {!username && <Share />}
        {username !== currentUsername || <Share />}
        {posts.length > 0 ? (
          posts.map((x) => (
            <Post key={Math.random()} post={x} handleDelete={handleDelete} />
          ))
        ) : (
          <div className="progress">
            <CircularProgress size={25} color="primary" />
          </div>
        )}
      </div>
    </div>
  );
};

字符串
Post.js:

const Post = ({ post, handleDelete }) => {
  const { _id, userId, desc, img, likes, comment } = post;
  const [likeCount, setLikeCount] = useState(likes?.length || 0);
  const [user, setUser] = useState(null);
  const { user: currentUser } = useSelector((state) => state.auth);
  const dispatch = useDispatch();
  const PF = process.env.REACT_APP_PUBLIC_FOLDER;

  const _isLiked = likes?.includes(currentUser._id);
  const [isLiked, setIsLiked] = useState(_isLiked);
  const [loading, setLoading] = useState(false);

  const likeHandler = () => {
    _id && dispatch(likeDislikePost(currentUser._id, _id));
    setLikeCount(isLiked ? likeCount - 1 : likeCount + 1);
    setIsLiked(!isLiked);
  };

  useEffect(() => {
    const fetchUser = async () => {
      if (userId) {
        const res = await axiosClient.get(`/users?userId=${userId}`);
        setUser(res.data);
      }
    };
    fetchUser();
  }, [userId]);

  return (
    <>
      {
        <div className="post">
          <div className="post-wrapper">
            <div className="post-top">
              <div className="post-top-left">
                <Link to={`/profile/${user?.username}`}>
                  <img
                    src={user?.profilePicture || PF + "person/noAvatar.png"}
                    alt=""
                    className="post-profile-img"
                  />
                </Link>
                <span className="post-username">{user?.username}</span>
                <span className="post-date">{format(post.createdAt)}</span>
              </div>
              <div className="post-top-right">
                <Tooltip title="Delete" arrow>
                  <IconButton onClick={() => handleDelete(_id)}>
                    <DeleteIcon />
                  </IconButton>
                </Tooltip>
              </div>
            </div>
            <div className="post-center">
              <span className="post-text">{desc}</span>
              <img className="post-img" src={img} />
            </div>
            <div className="post-bottom">
              <div className="post-bottom-left">
                <img
                  src={`${PF}like.png`}
                  onClick={likeHandler}
                  alt=""
                  className="like-icon"
                />
                <img
                  src={`${PF}heart.png`}
                  onClick={likeHandler}
                  alt=""
                  className="like-icon"
                />
                <span className="post-like-counter">
                  {likeCount} people like it
                </span>
              </div>
              <div className="post-bottom-right">
                <span className="post-comment-text">{comment} comments</span>
              </div>
            </div>
          </div>
        </div>
      }
    </>
  );
};

型
postActions.js:

export const deletePost = (id) => async (dispatch) => {
  try {
    const { data } = await axiosClient.delete(`/posts/${id}`);
    console.log(data);
    dispatch({ type: "DELETE_POST", id });
  } catch (error) {
    console.log(error);
  }
};

型
我需要在第一次单击按钮时删除项目，但第一次单击时传递给删除删除函数的ID未定义。但第二次单击时它存在并删除项目。