react-開發經驗分享-後端請求數據後進行本地存儲篩選

後端接口請求到數據後存儲到本地進行數據篩選的方法
此方法使用了對象對比和模糊查找
使用了原生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,
                })
            }
        })
    }