业务经验之谈

我们经常会遇到，针对某些过滤条件，然后进行查询，推荐一种比较好的写法。

1.数据定义

this.state = {
    currentPage: 1,
    total: 0,
    filter: {
        keyword: "",
        equipmentName: "",
        physicalAddressCoding: "",
        resourceCoding: ""
    },
    list:[]
} 
将总数写入total,将过滤条件写入filter。

3.对应的输入框change方法

//设置搜索关键字
handleFilterChange = e => {
    let filter = this.state.filter;
    filter[e.target.name] = e.target.value;
    this.setState({
        filter
    });
};

// 查询按钮
initEntry = () => {
    Ajax.ajax({
        url: "GetAssistDataList",
        data: {
            page: this.state.currentPage,
            per_page: C.G_PAGE_SIZE,
            filter: this.state.filter,
        },
        success: (data) => {
            this.setState({
                data:  data["list"]
                total: data["total"],//总数
                currentPage: data.page,
            });
        }
    });
};

// 重置按钮
handleReset = () => {
      this.resetFilter();// 重置过滤词
      this.initEntry();// 重新请求数据
};

resetFilter = () => {
        Util.resetObject(this.state.filter);
        this.setState({
        	currentPage: 1,
            filter: {
                keyword: "",
                physicalAddressCoding: "",
                equipmentName: "",
                resourceCoding: ""
            },
        })
    }

3.有模糊查询的数据渲染

建议实际渲染数据写在render中。 这样写的好处: 1. 不会破坏主数据data,将需要渲染的数据放在filterData中。

 render() {
        const {list,filter:{keyword}} = this.state;
        // 新加过滤条件未查询前的模糊匹配
        let tDate_filter = list
        if (keyword !== '') {
            tDate_filter = _.filter(tData, (Item) => {
                return Util.DeepObjToString(Item).includes(keyword);
            });
        }
}

3.无模糊查询的数据渲染

直接使用主数据。