Question

我有一个组件，可以为数组中的每个类别创建一个按钮。当前，有一个功能可以在其中选择一个类别时列出该类别中的帖子。还有一个“加载更多”按钮（分页）的功能，其中最初加载5个帖子，而onClick则加载另外5个帖子。现在，如果我正在查看“书籍”类别，并加载了一些“页面”价值的帖子-例如，我查看了第3页-当我单击“类别”时，第3页是最初加载的内容。当前代码是：

const Posts = ({ state }) => {
  const [categories, setCategories] = useState([]);
  const [categoryId, setCategoryId] = useState();
  const [page, setPage] = useState(1);
  const [posts, setPosts] = useState([]);

  const [allPosts, setAllPosts] = useState([]);

  useEffect(() => {
    fetch(state.source.api + "/wp/v2/categories")
      .then(response => response.json())
      .then(data => {
        setCategories(data);
      })
  }, []);

  useEffect(() => {
    if (categoryId) {
      fetch(state.source.api + "/wp/v2/posts?categories=" + categoryId + "&per_page=5")
        .then((response) => response.json())
        .then((data) => {
          setPosts(data);
        });
    }
  }, [categoryId]);

  useEffect(() => {
    if (!categoryId) {
      return;
    }
    let url = state.source.api + "/wp/v2/posts?categories=" + categoryId + "&per_page=5";
    if (page > 1) {
      url += `&page=${page}`;
    }
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setPosts([...posts, ...data]);
      });
  }, [categoryId, page]);

  useEffect(() => {
    let url = state.source.api + "/wp/v2/posts?per_page=5";
    if (page > 1) {
      url += `&page=${page}`;
    }
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setAllPosts([...allPosts, ...data]);
      });
  }, [page]);

  return (
    <>
      {categories.length > 0 ? (
        categories.map((category, i) => {
          return (
            <button key={i} onClick={() => setCategoryId(category.id)}>{category.name}</button>
          )
        })
      ) : (
          <p>Loading...</p>
        )
      }

      <div>
        {posts.length === 0 ? (
          <>
            {allPosts.map((generalPost, i) => {
              return (
                <li key={i}>{generalPost.title.rendered}</li>
              )
            })}
            <button onClick={() => { setPage(page + 1); }}>Load more</button>
          </>
        ) : (
            <>
              <ol>
                {posts.map((post, i) => {
                  console.log(post.id);
                  return (
                    <li key={i}>{post.title.rendered}</li>
                  )
                })}
              </ol>

              <button onClick={() => { setPage(page + 1); }}>Load more</button>
            </>
          )}
      </div>
    </>
  )
}

我正在尝试解决这种情况，以便在选择其他类别时，列出的帖子从第1页开始。根据我到目前为止所发现的内容，我读到我将需要将两个函数包装在一起。我想我需要创建一个执行这两个功能的函数：

useEffect(() => {
    if (!categoryId) {
      return;
    }
    let url = state.source.api + "/wp/v2/posts?categories=" + categoryId + "&per_page=5";
    if (page > 1) {
      url += `&page=${page}`;
    }
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setPosts([...posts, ...data]);
      });
  }, [categoryId, page]);

  useEffect(() => {
    let url = state.source.api + "/wp/v2/posts?per_page=5";
    if (page > 1) {
      url += `&page=${page}`;
    }
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setAllPosts([...allPosts, ...data]);
      });
  }, [page]);

我对如何将这两个功能合而为一感到困惑。任何建议或其他资源都将有所帮助。

Answer 1

我认为当您切换类别时，您也应该重置所有其他值。

只是尝试更换

<button key={i} onClick={() => setCategoryId(category.id)}>{category.name}</button>

使用

<button key={i} onClick={() => {
    setPage(1);
    setPosts([]);
    setCategoryId(category.id);
}}>{category.name}</button>

React钩子-在一个钩子中调用两个函数

1 个答案: