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