为了账号安全,请及时绑定邮箱和手机立即绑定

路由参数更改时,组件不会重新安装

/ 猿问

路由参数更改时,组件不会重新安装

蝴蝶刀刀 2019-11-12 10:21:28

我正在使用react-router开发一个React应用程序。我有一个项目页面,其URL如下:


myapplication.com/project/unique-project-id

当项目组件加载时,我从componentDidMount事件触发了对该项目的数据请求。我现在遇到一个问题,即如果我直接在两个项目之间切换,那么只有id会这样改变...


myapplication.com/project/982378632

myapplication.com/project/782387223

myapplication.com/project/198731289

componentDidMount不会再次触发,因此不会刷新数据。我是否应该使用另一个生命周期事件来触发我的数据请求,或者使用其他策略来解决此问题?


查看完整描述

3 回答

?
翻阅古今

如果链接仅通过不同的参数指向同一条路线,则它不是重新安装,而是接收新的道具。因此,您可以使用该componentWillReceiveProps(newProps)函数并查找newProps.params.projectId。


如果您要加载数据,我建议在路由器使用组件上的静态方法处理匹配之前获取数据。看看这个例子。反应路由器兆演示。这样,该组件将加载数据并在路由参数更改时自动更新,而无需依赖componentWillReceiveProps。


查看完整回答
反对 回复 2019-11-12
?
慕容3067478

如果在更改路线时确实需要重新安装组件,则可以将唯一键传递给组件的key属性(该键与您的路径/路由相关联)。因此,每次路线更改时,密钥也会更改,从而触发React组件卸载/重新安装。我从这个答案中得到了主意


查看完整回答
反对 回复 2019-11-12
?
RISEBY

您必须清楚,路由更改不会导致页面刷新,您必须自己处理。


import theThingsYouNeed from './whereYouFindThem'


export default class Project extends React.Component {


    componentWillMount() {


        this.state = {

            id: this.props.router.params.id

        }


        // fire action to update redux project store

        this.props.dispatch(fetchProject(this.props.router.params.id))

    }


    componentDidUpdate(prevProps, prevState) {

         /**

         * this is the initial render

         * without a previous prop change

         */

        if(prevProps == undefined) {

            return false

        }


        /**

         * new Project in town ?

         */

        if (this.state.id != this.props.router.params.id) {

           this.props.dispatch(fetchProject(this.props.router.params.id))

           this.setState({id: this.props.router.params.id})

        }


    }


    render() { <Project .../> }

}


查看完整回答
反对 回复 2019-11-12

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信