react-开发经验分享-后端请求数据后进行本地存储筛选

Author:Mr.柳上原

  • 付出不亚于任何的努力
  • 愿我们所有的努力,都不会被生活辜负
  • 不忘初心,方得始终

后端接口请求到数据后存储到本地进行数据筛选的方法
此方法使用了对象对比和模糊查找
使用了原生es6开发
实现方法如下:

// 后端接口请求到数据
// 数据存储到state里
// 获取表单输入值,并用表单里的值对数据进行筛选

// 使用state来存储后端数据并动态更新
this.state = {
  projectData: [], // 后端数据
}
// 
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values); // values为表单获取到的用户输出值,格式为{xx:xx, xx:xx, xx:xx, ......}

                // 本地数据筛选
                let newValues = {};
                for (let key in values) {
                   switch(values[key]) {
                     case '项目名称': {
                         newValues.name = values.name;
                         break;
                      }
                      case '开发商名称': {
                          newValues.developerName = values.name;
                          break;
                       }
                       case values.name: 
                           break;
                        default: {
                            if (typeof values[key] !== 'undefined') {
                                 newValues[key] = values[key]
                              }
                           }
                      }
               }

                let data = this.state.projectData; // 后端获取到的数据,格式为数组
                // 取出数组里的每一项(item为对象),与用户的输出(对象)值对比
                let newData = data.filter(item => Object.keys(newValues).every(key => typeof item[key] === 'string'
                ? item[key].includes(newValues[key])
                 : item[key] === newValues[key]));

               console.log('newValues', newValues);
               console.log('newData', newData);

                this.setState({
                   projectData: newData,
                })
            }
        })
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 32,008评论 2 89
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,135评论 1 32
  • 尚俊平,焦点网络中级,坚持分享713天,2018年4月1日,周日 我对去公式化的理解是这样的:不用现在的成功标准去...
    32598db751bb阅读 247评论 0 0
  • 前两天在简书上写了一篇文章听说你是个“时尚博主”,分享到了微信朋友圈,一分钟内收到好多留言,朋友们纷纷以为我是诈尸...
    凉姨阅读 551评论 0 3
  • 首先,两者都是比较器,主要用来对集合进行排序。废话不多说,直接上代码,来看看两者的区别 Comparable 可以...
    sofarsogoo_932d阅读 275评论 0 0