Javascript React组件返回映射项的列表，然后消失

我有一个React组件，它呈现一个映射的项目列表，并显示每个项目的id。当组件第一次加载时，列表项会出现，但一两秒钟后就会消失，并且在控制台中返回

未定义的

正在渲染的组件是：

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

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

  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) => {
                  console.log(post.id);
                  return (
                    <li key={i}>{post.id}</li>
                  )
                })}
              </ol>

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

const Posts=（{state}）=>{
const[categories，setCategories]=useState（[]）；
常量[categoryId，setCategoryId]=useState（）；
const[page，setPage]=useState（1）；
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（））
。然后（（数据）=>{
设置柱（数据）；
});
}
}，[类别]；
useffect（（）=>{
如果（！categoryId）{
返回；
}
让url=state.source.api+“/wp/v2/posts？categories=“+categoryId+”&每页=5”；
如果（第1页）{
url+=`&page=${page}`；
}
获取（url）
.then（（response）=>response.json（））
。然后（（数据）=>{
setPosts（[…posts，data]）；
});
}，[类别ID，第页]；
返回(
{categories.length>0(
categories.map（（categories，i）=>{
返回(
setCategoryId（category.id）}>{category.name}
)
})
) : (
加载

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

) : (
{posts.map（（post，i）=>{
console.log（post.id）；
返回(
{post.id}
)
})}
{setPage（第+1页）；}}>加载更多
)}
)
}

控制台显示：

我在这个组件上面注释了很多代码，所以控制台中的行是指

console.log（post.id）

有人知道是什么原因导致了这种情况吗？
不需要这种效果。两个useEffects在初始加载时都试图使用相同的url参数命中相同的端点

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

我认为这里没有正确合并数组：

try to replace:
setPosts([...posts, data]);

to:
setPosts([...posts, ...data]);