React组件prop变更后未更新，useEffect渲染后状态未同步问题

问题根因 #

• 你重复声明了RouterCourse变量，函数组件每次重渲染时，外层的var RouterCourse初始化逻辑会覆盖useEffect中赋值的版本，导致永远只能拿到初始化时的Paid值false
• 不需要通过useEffect动态更新组件定义，React组件本身会响应状态变化自动重渲染，原有写法违背了React的响应式设计逻辑

修复方案 #

直接删除多余的useEffect和重复的组件声明逻辑即可，有两种实现方式：

方案1：保留RouterCourse组件 #

const [Paid, setPaid] = useState(false);

const fetchTransaction = async () => {
      const data = await response.get();
      if (data.docs[0].data().status === "COMPLETED") {
          setPaid(true)
      }
}

useEffect(() => {
    fetchTransaction();
}, [])

// 直接定义即可，组件重渲染时会自动获取最新的Paid值
const RouterCourse = () => {
  return (
    <CourseRoute path="/course" component={Course} pay={Paid}/>
  )
}

return(
    <div>
        <Router>
            <Switch>
                <RouterCourse />
            </Switch>
        </Router>
    </div>
)

方案2：省略冗余的RouterCourse封装，直接写路由 #

如果没有其他复用场景，直接把CourseRoute写在Switch中即可：

const [Paid, setPaid] = useState(false);

const fetchTransaction = async () => {
      const data = await response.get();
      if (data.docs[0].data().status === "COMPLETED") {
          setPaid(true)
      }
}

useEffect(() => {
    fetchTransaction();
}, [])

return(
    <div>
        <Router>
            <Switch>
                <CourseRoute path="/course" component={Course} pay={Paid}/>
            </Switch>
        </Router>
    </div>
)

内容的提问来源于stack exchange，提问作者Y. Ben