如何显示映射数组的列表 onClick - React

Question

我有一个组件，我试图在其中添加分页功能。到目前为止，我在结构上取得了很好的进展。我有类别按钮，其中选择了类别按钮时，下面的元素显示该类别中的帖子列表。

对于分页功能，我使用 WordPress REST API 为每个类别一次提取 5 个帖子。我正在尝试在第 5 个帖子之后创建一个“加载更多”按钮，onClick 它将加载接下来的 5 个帖子：

const Posts = ({ state, actions }) => {
  const [categories, setCategories] = useState([]);
  const [categoryId, setCategoryId] = useState();
  const [posts, setPosts] = 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]);

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

  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 ? (
          <p>No posts...</p>
        ) : (
          <>
            <ol>
              {posts.map((post, i) => {
              return (
                <li key={i}>{post.title.rendered}</li>
              )
            })}
            </ol>
            <button onClick={() => setMorePosts(category.id)}>Load More</button>
              {console.log(morePosts.map((post) => post.title.rendered))}
            </>
          )}
      </div>
    </>
  )
}

如您所见，在最后一个 button 下，我正在整理数组，它确实返回了所选类别的下 5 个帖子。我被困在如何将该数组从控制台转换为实际显示在页面上。

Answer 1

我会这样做：

加载更多按钮更改页码。 当页码更改时：useEffect 触发，帖子根据页码参数重新获取/重新呈现。

const [page, setPage] = useState(1);
const [posts, setPosts] = useState([]);

useEffect(() => {
    if (!categoryId) {
        return;
    }

    let url = `${state.source.api}/wp/v2/postscategories=${categoryId}&per_page=5"`;

    if (page > 1) {
        url += `&page=${page}`;
    }

    fetch(url)
        .then((response) => response.json())
        .then((data) => {
            setPosts([...posts, ...data]);
        });
  }, [categoryId, page]);

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