清理组件状态 useEffect

Question

I have states :

  const { id } = useParams<IRouterParams>();
const [posts, setPosts] = useState<IPost[]>([]);
const [perPage, setPerPage] = useState(5);
 
const [fetchError, setFetchError] = useState("");
 
const [lastPostDate, setLastPostDate] = useState<string | null>(null);
 
// is any more posts in database
const [hasMore, setHasMore] = useState(true);

and useEffect :

  // getting posts from server with first render
  useEffect(() => {
    console.log(posts);

    fetchPosts();
    console.log(hasMore, lastPostDate);
    return () => {
      setHasMore(true);
      setLastPostDate(null);
      setPosts([]);
      mounted = false;
      return;
    };
  }, [id]);

When component change (by id), I would like to clean/reset all states. My problem is that all states are still the same, this setState functions in useEffect cleaning function doesn't work.

@@UPDATE

 // getting posts from server
  const fetchPosts = () => {
    let url;
    if (lastPostDate)
      url = `http://localhost:5000/api/posts/getPosts/profile/${id}?limit=${perPage}&date=${lastPostDate}`;
    else
      url = `http://localhost:5000/api/posts/getPosts/profile/${id}?limit=${perPage}`;
    api
      .get(url, {
        headers: authenticationHeader(),
      })
      .then((resp) => {
        if (mounted) {
          if (resp.data.length === 0) {
            setFetchError("");
            setHasMore(false);
            setPosts(resp.data);
            return;
          }

          setPosts((prevState) => [...prevState, ...resp.data]);
          if (resp.data.length < perPage) setHasMore(false);
          setLastPostDate(resp.data[resp.data.length - 1].created_at);
          setFetchError("");
        }
      })
      .catch((err) => setFetchError("Problem z pobraniem postów."));
  };

Answer 1

if your component isnt unmounted, then the return function inside useEffect will not be called.

if only the "id" changes, then try doing this instead:

useEffect(() => {
    // ... other stuff
    setHasMore(true);
    setLastPostDate(null);
    setPosts([]);
 
    return () => { //...code to run on unmount }
},[id]);

whenever id changes, the codes inside useEffect will run. thus clearing out your states.

Answer 2

OK, I fixed it, don't know if it is the best solution, but works...

  useEffect(() => {
    setPosts([]);
    setHasMore(true);
    setLastPostDate(null);
    return () => {
      mounted = false;
      return;
    };
  }, [id]);

  // getting posts from server with first render
  useEffect(() => {
    console.log(lastPostDate, hasMore);
    hasMore && !lastPostDate && fetchPosts();
  }, [lastPostDate, hasMore]);