React-通过useEffect更改道具渲染后组件未更新

Question

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

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

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

    useEffect(() => {
      RouterCourse = () => {
        return (
          <CourseRoute path="/course" component={Course} pay={Paid}/>
        )
      }
  }, [Paid]);
  var RouterCourse = () => {
    return (
      <CourseRoute path="/course" component={Course} pay={Paid}/>
    )
  }

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

所以在Routercourse函数内部，包含一个定制的PrivateRoute组件，是一个名为Paid的变量。这个变量是使用钩子定义的。通过异步函数 fetchTransaction（false 为 true）更改支付，但不使用新值（true）。如何更新返回的 {RouterCourse()} 中使用的值？

Answer 1

我发现您可以定义另一个状态，最初是带有已付费 false 的组件，然后在 useEffect 中使用 setState https://i.stack.imgur.com/306pw.png 更改该组件，上传此图片可能会对您有所帮助，这与您的问题类似