操作数据
操作数据
1，对象转数组形式：
原数据：
目标数据：
// const dataSource = [
// { productKey: 1, name: 'a' },
// { productKey: 2, name: 'b' },
// ];
const dataSource = valueList && Object.keys(valueList).map((pk) => ({
productKey: pk,
...valueList[pk],
}));
对此进行反转，
const newDataSource = payload.newRequest.reduce((pre, next) => {
const pk = next.productKey;
delete next.productKey;
pre[pk] = next;
return pre;
}, {});
2，在原数组里面新增数组数据：
新的数据是value.tabList
原来的数据是cateItemList里面，
新的数据重新setState到老的数据里面
使用：[……原来的数据，value.tabList]
this.setState({
cateItemList: [...cateItemList, value.tabList],
});
3，
我这里转后怎么在把cateItemList，放入MiniInfo里面
使用
{...MiniInfo, cateItemList}
前端操作数据，置顶，上移，下移，删除，
置顶：
RoofTop = (record, index) => {
const { cateItemList } = this.state;
// const dataSourceProduct = cateItemList && cateItemList.map((item, i) => ({
// ...item,
// key: i,
// id: i + 1,
// }));
if (index === 0) {
message.warning('已经是顶部');
} else {
cateItemList.unshift(cateItemList.splice(index, 1)[0]);
}
this.setState({
cateItemList,
});
}
上移：
MoveUpword = (record, index) => {
const { cateItemList } = this.state;
// const dataSourceProduct = cateItemList && cateItemList.map((item, i) => ({
// ...item,
// key: i,
// }));
if (index !== 0) {
cateItemList[index] =
cateItemList.splice(index - 1, 1, cateItemList[index])[0];
} else {
cateItemList.push(cateItemList.shift());
}
this.setState({
cateItemList,
});
}
下移：
MoveDown = (record, index) => {
const { cateItemList } = this.state;
// const dataSourceProduct = cateItemList && cateItemList.map((item, i) => ({
// ...item,
// key: i,
// }));
if (index !== cateItemList.length - 1) {
cateItemList[index] =
cateItemList.splice(index + 1, 1, cateItemList[index])[0];
} else {
cateItemList.unshift(cateItemList.splice(index, 1)[0]);
}
this.setState({
cateItemList,
});
}
删除：
delTab = (record, index) => {
const { cateItemList } = this.state;
// const dataSourceProduct = cateItemList && cateItemList.map((item, i) => ({
// ...item,
// key: i,
// id: i + 1,
// }));
const itemlist = cateItemList.splice(index, 1)[0];
console.log(itemlist, cateItemList, 'item');
this.setState({
cateItemList,
});
}
前端搜索：
onSearch=(value) => {
console.log(value, 'value');
const { result } = this.state;
const { devicetypeall } = this.props;
const arr = [];
this.setState({
keys: 0,
});
if (value) {
devicetypeall.map(item => {
// if (v.devTypeCn.includes(value.key)) {
// arr.push(v);
// console.log(v, 'aaaaaaaa');
// }
if (item.childrenDevType) {
const childrenDevType = [];
item.childrenDevType.map(items => {
if (items.devTypeCn.includes(value)) {
const obj = {};
childrenDevType.push(items);
const has = arr.filter(i => i.devTypeCn === item.devTypeCn);
if (has.length < 1) {
obj.devTypeCn = item.devTypeCn;
obj.devTypeEn = item.devTypeEn;
obj.id = item.id;
obj.childrenDevType = childrenDevType;
arr.push(obj);
}
}
});
}
});
this.setState({
result: arr,
});
} else {
this.setState({
result: devicetypeall,
});
}
}
新加的一个banner管理，在原数据里面添加bannerlist
回调的时候：
上一篇： 奢侈的富豪家庭