Question

我有州：

  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);

和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]);

当组件更改（按ID）时，我想清除/重置所有状态。我的问题是所有状态仍然相同，useEffect清理功能中的setState函数不起作用。

@@ 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

如果未卸载组件，则不会调用useEffect内部的return函数。

如果仅更改“ id”，请尝试执行以下操作：

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

每当id更改时，useEffect中的代码将运行。从而清除您的状态。

Answer 2

好的，我已修复它，不知道这是否是最好的解决方案，但是可行...

  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]);

清洁组件状态useEffect

2 个答案: