React实战笔记---如何动态加载查询条件

发表于 | 分类于 | 阅读次数 次

React实战笔记—如何动态加载查询条件

如图需要动态加载第五个查询条件
图p1

由于框架原因，没法使用父组件直接调用子组件的方式。
下面给我这边的解决方案–>通过页面加载完成之后再根据最新数据强制渲染一次的方式,
代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//页面渲染之前加载数据
componentWillMount() {
    this.getCCYType();
}

//页面渲染完成之后再根据加载的数据强制渲染一次
//时间间隔为0.001ms
componentDidMount() {
    setInterval(() => {
                   this.setState(() => {
                        return { unseen: "does not display" }
});}, 0.001);
}

//获取数据方法
getCCYType = async () => {
        const retdata = await getCCYType();
        var data = [];
        if (retdata.code === 20000) {
            let ccylist = retdata.result.item_list;
            for (var i = 0; i < ccylist.length; i++) {
                data.push({id: ccylist[i].currencyCode, name: ccylist[i].currencyName})
            }
            this.formList.push( {
                type: 'SELECT',
                label: '币种',
                field: 'currencyType',
                placeholder: '请输入导入日期',
                list: data,
                width: 100,
            });
        } else {
            message.error("获取币种类型异常！ error=" + retdata.msg)
        }
};

这样就可以以动态方式加载查询条件了，如下
图p2