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,
                })
            }
        })
    }