React useEffect useContext - context适用于某些组件，但不适用于动态路由

Question

我在一个React博客应用程序上工作，并在markdown文件中有元数据的帖子。元数据存储在Firestore中。包含内容的.md文件存储在云存储中。应用程序组件使用useEffect从Firestore获取每个帖子的元数据，并将其(一个对象数组)保存到PostContext中。这是App组件：

import React, { useEffect } from 'react'
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import { firestore } from './firebase'
import { usePostsUpdate } from "./contexts/PostContext"
import PrivateRoute from "./components/auth/PrivateRoute"
...

function App() {
  const savePosts = usePostsUpdate()

  useEffect(() => {
    const postsRef = firestore.collection('metadata')
    postsRef.get()
      .then((snapshot) => {
        const posts = snapshot.docs.map((doc) => ({
          ...doc.data()
        }))
        posts.sort((a, b) => b.postId - a.postId)
        savePosts(posts)
        console.log('App: in useEffect, posts.length', posts.length)
      })
  }, [])

  console.log('APP')
  return (
    <React.Fragment>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          ...
          <Route path="/all-posts" component={AllPostsPage} />
          <Route path='/post/:id' render={props => <Post {...props} />} />
          <Route path='/404' component={NotFoundPage} />
        </Switch>

      </Router>
    </React.Fragment>
  );
}

export default App;

有两个问题。首先，关于上下文。'savePost()‘函数将数组保存到PostContext，在主页和’all-post‘页面中成功使用了该函数。但是，当我尝试使用“/ post /:id”来访问特定的帖子时，从PostContext拉入的数组是空的。不知何故，该数组似乎被重置为其默认值(空)，因此当我尝试访问它时会出现错误(该数组保存了访问云存储中的标记文件的urls，这些urls是检索页面上所需内容所需的)。我找不到发生这种情况的原因。

其次，React告诉我要在useEffect中包含'savePosts‘作为依赖项。但是当我这样做的时候，它就会循环。如果我删除依赖数组(我并不真的想这样做)，同样的事情也会发生。我不能添加满足React且不会连续循环的依赖项。

Answer 1

现在它起作用了。我手动输入urls以测试路由。我继续设置了动态路由(通过单击主页上的帖子摘要路由到/ post /id )，现在上下文中的数组已正确填充。我不明白为什么在浏览器中手动输入'localhost:3000/post/1‘与通过点击链接路由到同一个URL的工作方式不同，但它确实如此。

这并没有解决React useEffect警告的问题，但我可以接受。