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

摘要： 後端介面請求到資料後儲存到本地進行資料篩選的方法 此方法使用了物件對比和模糊查詢 使用了原生es6開發 實現方法如下： // 後端介面請求到資料 // 資料儲存到state裡 // 獲取表單輸入值，並用表單裡的值對資料進行篩選 /...

後端介面請求到資料後儲存到本地進行資料篩選的方法

此方法使用了物件對比和模糊查詢

使用了原生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,
})
}
})
}