React useEffect useContext - 上下文适用于某些组件，但不适用于动态路由答案

【问题标题】：React useEffect useContext - context works with some components, but not in dynamic routeReact useEffect useContext - 上下文适用于某些组件，但不适用于动态路由
【发布时间】：2021-07-06 11:48:20
【问题描述】：

我正在开发一个 React 博客应用程序，并在带有元数据的 Markdown 文件中发布帖子。元数据存储在 Firestore 中。包含内容的 .md 文件存储在 Cloud Storage 中。 App 组件使用 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;

有 2 个问题。首先，关于语境。 'savePost()' 函数将数组保存到 PostContext，该数组已成功用于主页和“所有帖子”页面。但是，当我尝试使用“/post/:id”访问特定帖子时，从 PostContext 中提取的数组为空。不知何故，该数组似乎被重置为其默认（空）值，因此当我尝试访问它时出现错误（该数组包含用于访问 Cloud Storage 中检索所需内容所需的降价文件的 URL在页面上）。我找不到发生这种情况的原因。

其次，React 告诉我在 useEffect 中包含“savePosts”作为依赖项。但是当我这样做时，它只是循环。如果我删除依赖数组（我真的不想这样做），也会发生同样的事情。我没有可以添加满足 React 并且不会连续循环的依赖项。

【问题讨论】：

然后将你的依赖包含在 React.useEffect 的依赖数组中。
我试过了。如果我添加依赖项，组件会不断重新渲染。

标签： javascript reactjs use-effect react-context use-context

【解决方案1】：

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

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

【讨论】：