Question

我使用 React 作为推荐函数。

但即使我将从 useSelector 接收到的状态值放入 useEffect 的 dep，useEffect 也不会按预期执行。

submitLike执行时更新状态值的detailPost，但useEffect除了第一次外不执行

你能给我建议一个解决方案吗？

下面是我的 tsx 文件和减速器

post.tsx（页面）

const Post = () => {
  const dispatch = useDispatch();

  const detailPost = useSelector((store: RootState) => store.post.detailPost);
  const [post, setPost] = useState({ ...detailPost });

  const [isLiked, setIsLiked] = useState(
    { ...detailPost }.liker?.split(',').filter((v: string) => +v === me.id).length || 0,
  );

  const submitLike = () => {
    if (isLiked) dispatch(UNLIKE_POST_REQUEST({ userId: me.id, postId: detailPost.id }));
    else dispatch(LIKE_POST_REQUEST({ userId: me.id, postId: detailPost.id }));
  };

  useEffect(() => {
    loadPostAPI(window.location.href.split('/')[4])
      .then((res) => {
        setPost(res.data);
        const currentLiked = res.data.liker?.split(',').filter((v: string) => +v === me.id).length || 0;
        setIsLiked(currentLiked);
        return currentLiked;
      })
      .catch((error) => console.log(error));
  }, [detailPost]);

  return (
     ...
     post.User.nickname
     post.like
     ...
  );
};
export default Post;

post.ts(reducer)

const Post = (state = initialState, action: any) => {
  switch (action.type) {
     ...
    case LIKE_POST_REQUEST:
      return { ...state, likePostLoading: true, likePostDone: false, likePostError: null };
    case LIKE_POST_SUCCESS: {
      const posts: any[] = [...state.mainPosts];
      const post = posts.find((v) => v.id === action.data.postId);
      if (post.liker) post.liker += `,${action.data.userId}`;
      else post.liker = `${action.data.userId}`;
      post.like += 1;
      return { ...state, likePostLoading: false, likePostDone: true, likePostError: null, detailPost: post };
    }
    case UNLIKE_POST_SUCCESS: {
      const posts: any[] = [...state.mainPosts];
      const post = posts.find((v) => v.id === action.data.postId);
      const liker = post.liker.split(',');
      const idx = liker.find((v: string) => +v === action.data.userId);
      liker.splice(idx, 1);
      post.liker = liker.join('');
      post.like -= 1;
      return { ...state, unlikePostLoading: false, unlikePostDone: true, unlikePostError: null, detailPost: post };
    }
    default:
      return state;
     ...
  }
};

export default Post;

而当我点击刷新时，帖子值变为未定义并发生错误。我也想用useEffect解决这个问题。

如何检测useSelector的状态值改变了？

0 个答案: