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 参数访问相同的端点。&nbsp;useEffect(() => {&nbsp; &nbsp; if (categoryId) {&nbsp; &nbsp; &nbsp; fetch(state.source.api + "/wp/v2/posts?categories=" + categoryId + "&per_page=5")&nbsp; &nbsp; &nbsp; &nbsp; .then((response) => response.json())&nbsp; &nbsp; &nbsp; &nbsp; .then((data) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setPosts(data);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; }, [categoryId]);而且我认为数组在这里没有正确合并：try to replace:setPosts([...posts, data]);to:setPosts([...posts, ...data]);