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

Question

我有一个 React 组件，它呈现正在映射的项目列表，并显示每个项目的 ID。当组件首次加载时，列表项出现，但一两秒钟后消失，并在控制台中返回undefined。正在渲染的组件是：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>    </>  )}并且控制台显示：我在该组件上方注释掉了很多代码，因此控制台中的行指的是console.log(post.id);.有谁知道可能是什么原因造成的？

Answer 1

不需要此 useEffect。两个 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]);