美文网首页菜鸟前端工程师程序员
react-开发经验分享-后端请求数据后进行本地存储筛选

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

作者: Mr柳上原 | 来源:发表于2019-01-24 09:35 被阅读5次

    后端接口请求到数据后存储到本地进行数据筛选的方法
    此方法使用了对象对比和模糊查找
    使用了原生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,
                    })
                }
            })
        }
    

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/oqparqtx.html