Javascript 使用数据初始化useState不会刷新页面

我有一条路线：

<Route path="/projects/:handle" component={Project} />

---

我加载组件数据的方式可能有什么问题？是否有更好的方式，可能是通过useEffect？（我对react（和react hooks）有点陌生）

这不是使用道具初始化状态的方式（我们稍后会回来讨论）

一般来说，没有理由将道具复制到状态。用道具就行了。这就是它的目的。它基本上是由父组件管理的组件的状态。因此：

const Project = ({ match }) => {

    const projectContext = useContext(ProjectContext)
    const project = projectContext.getProject(match.params.handle); // ***

    return (
        <>
            <Row>
                <Col sm={12} lg={12}>
                    <ProjectOverview projectContext={projectContext} project={project} />
                </Col>
            </Row>
        </>
    );
}

实例：

const{useState，useEffect，useMemo，useContext}=React；
常量行=道具=>；
const Col=props=>；
const ProjectOverview=（{projectContext，project}）=>{
返回项目：{Project.name}；
};
常量上下文值={
getProject（句柄）{
log（`Getting project${handle}…`）；
//忙等半秒钟
const end=Date.now（）+500；
while（Date.now{
log（`Project called with handle=${match.params.handle}`）；
const projectContext=useContext（projectContext）
const project=usemo(
() => {
log（`reccalcing project from handle${match.params.handle}`）；
返回projectContext.getProject（match.params.handle）；
},
[匹配参数句柄]
);
log（`project is:${project.name}`）；
//注意：无法在堆栈片段中使用…我们有
//使用旧的React.Fragment语法。
返回(
);
}
常量应用=（）=>{
const[counter，setCounter]=useState（0）；
const[handle，setHandle]=useState（1）；
useffect（（）=>{
如果（手柄<3）{
设置超时（（）=>{
设置计数器（c=>{
c=c=0？1:0；
如果（c==0）{
//每两次调用更新句柄
setHandle（h=>h+1）；
}
返回c；
});
}, 800);
}
}，[把手，柜台]；
返回(
);
};
render（，document.getElementById（“根”））

非常好。我真的很感谢你花了这么多时间简明扼要地为我的问题提供解决方案，更重要的是为什么。@Sash-我的荣幸！：-）
const Project = ({ match }) => {

    const projectContext = useContext(ProjectContext)
    const project = projectContext.getProject(match.params.handle); // ***

    return (
        <>
            <Row>
                <Col sm={12} lg={12}>
                    <ProjectOverview projectContext={projectContext} project={project} />
                </Col>
            </Row>
        </>
    );
}

const Project = ({ match }) => {

    const projectContext = useContext(ProjectContext)
    const project = useMemo(
        () => projectContext.getProject(match.params.handle),
        [match.params.handle]
    );

    return (
        <>
            <Row>
                <Col sm={12} lg={12}>
                    <ProjectOverview projectContext={projectContext} project={project} />
                </Col>
            </Row>
        </>
    );
}