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

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

对于分页功能，我使用WordPress REST API为每个类别一次提交5篇文章。我试图在第5篇文章后创建一个“加载更多”按钮，单击该按钮将加载接下来的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>
    </>
  )
}

const Posts=（{state，actions}）=>{
const[categories，setCategories]=useState（[]）；
常量[categoryId，setCategoryId]=useState（）；
const[posts，setPosts]=useState（[]）；
useffect（（）=>{
获取（state.source.api+“/wp/v2/categories”）
.then（response=>response.json（））
。然后（数据=>{
设置类别（数据）；
})
}, []);
useffect（（）=>{
if（类别ID）{
获取（state.source.api+“/wp/v2/posts？categories=“+categoryId+”&per_page=5”）
.then（（response）=>response.json（））
。然后（（数据）=>{
设置柱（数据）；
});
}
}，[类别]；
const[morePosts，setMorePosts]=useState（[]）；
useffect（（）=>{
if（类别ID）{
获取（state.source.api+”/wp/v2/posts？categories=“+categoryId+”&per_page=5&page=“+2）
.then（（response）=>response.json（））
。然后（（数据）=>{
setMorePosts（数据）；
});
}
}，[类别]；
返回(
{categories.length>0(
categories.map（（categories，i）=>{
返回(
setCategoryId（category.id）}>{category.name}
)
})
) : (
加载

)
}
{posts.length==0(
没有帖子

) : (
{posts.map（（post，i）=>{
返回(
{post.title.rendered}
)
})}
setMorePosts（category.id）}>加载更多
{console.log（morePosts.map（（post）=>post.title.rendered））}
)}
)
}

---

如您所见，在最后一个

按钮下，我正在对数组进行安慰，它确实会返回所选类别的接下来5篇文章。我一直在思考如何将该阵列从控制台转换为实际显示在页面上。
我会这样做：

“加载更多”按钮更改页码。
更改页码时：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>

const[page，setPage]=useState（1）；
const[posts，setPosts]=useState（[]）；
useffect（（）=>{
如果（！categoryId）{
返回；
}
让url=`${state.source.api}/wp/v2/postscategories=${categoryId}&per_page=5`；
如果（第1页）{
url+=`&page=${page}`；
}
获取（url）
.then（（response）=>response.json（））
。然后（（数据）=>{
setPosts（[…posts，…data]）；
});
}，[类别ID，第页]；
{setPage（第+1页）；}}>加载更多
确实有效，谢谢！按照这种加载方式，它会用接下来的五篇文章覆盖前五篇文章。你知道我如何将“下一篇”文章连接到第一篇文章的末尾吗？