当前位置：首页 > news >正文

componentDidMount只执行一次的解决方法

news 2025/9/1 14:25:06

一、前言

最近写react antd前端项目，需要页面加载时调用下查询列表的接口。

于是在componentDidMount方法里这样写了：

  componentDidMount() {const {dispatch,MyJS: { queryPara },} = this.props;//这个调用接口查询列表dispatch({ type: 'MyJS/fetch', queryPara });}

之后，当首次打开这个页面时，确实可以查询到数据列表；

但是关闭这个页面后再次打开，就发现没有数据了，componentDidMount没有执行。

二、解决方法

1.由于关闭页面时，没有销毁这个页面，因此再次打开这个页面，页面不会重新加载，就不会调用componentDidMount方法。

2.因此，可以在引入页面的标签中，加上destroyOnClose，样例如下：

        <Drawerwidth={1200}title="选择列表"placement="right"closable={false}onClose={this.onClose1}visible={visible1}destroyOnClose><Mypage onClose={this.onClose1} /></Drawer>

说明：
(1)Drawer标签是import { Drawer } from 'antd';
(2)closable={false}是样式，false时右上角没有关闭按钮，true时有。
(3)visible控制这个子页面打开或者关闭
(4)加上destroyOnClose，就可以当页面关闭后，销毁页面，下次再打开页面就能触发componentDidMount方法了。（如果需要缓存页面、不需要销毁，那就去掉这个）
(5)Mypage标签是自己写的一个页面，import Mypage from './mypage/index';
(6)onColse是页面被关闭时会调用的方法