在react js中显示相同的数据，如果条件不起作用或不起作用，但map函数在不排序的情况下获取所有值

Question

你好，我面临着日历中显示重复值的问题，而不是根据条件排序的值。任何人都能解决这个问题吗？

async componentDidMount() {
axios
.get("/timesheet/count", { responseType: "json" })
.then((response) => {
const countData = response.data.result;
const rejectData = response.data.result;
console.log(countData);
countData.map((item, index) => {
if (item.approved > 0) {
item.title = `approved: ${item.approved}`;
item.start = new Date(item.date);
item.end = new Date(item.date);
console.log("app");
} else if (item.rejected > 0) {
item.title = `rejected: ${item.rejected}`;
item.start = new Date(item.date);
item.end = new Date(item.date);
console.log("rej"); 
} else if (item.submitted > 0) {
item.title = `submitted: ${item.submitted}`;
item.start = new Date(item.date);
item.end = new Date(item.date);
console.log("sub");
} else {
item.title = `Not Submitted: ${item.saved}`;
item.start = new Date(item.date);
item.end = new Date(item.date);
console.log("not");
}
console.log("1st item",item);
return item;
});
rejectData.map((secitem, index) => {
if(secitem.date == '10-March-2021'){
secitem.title = `rejected: ${secitem.rejected}`;
secitem.start = new Date(secitem.date);
secitem.end = new Date(secitem.date);
console.log("2nd secitem",secitem);
}
else{
console.log('empty strusidohjaskj jas');
}

//  return item;
});
const tdate = [...countData];
const rejdate = [...rejectData];
this.setState({
countData: {
data: [...tdate],
},
rejectData: {
data: [...rejdate],
},
});
})

https://i.stack.imgur.com/ebYpE.jpg

Answer 1

您的countData和rejectData包含相同的数据，因此如果将两者都添加到调用者中，则会得到重复的数据。

这是因为你从开始

const countData = response.data.result;
const rejectData = response.data.result;

也许你应该把它改成

const countData = response.data.result.filter(({ rejected }) => !rejected);
const rejectData = response.data.result.filter(({ rejected }) => rejected);

Answer 2

这是我的代码，结果是

https://i.stack.imgur.com/IeYlh.jpg

const countData = response.data.result.filter(({ approved }) => approved);
const rejectData = response.data.result.filter(({ rejected }) => rejected);
console.log(countData);
countData.map((item, index) => {
if (item.approved > 0) {
item.title = `approved: ${item.approved}`;
item.start = new Date(item.date);
item.end = new Date(item.date);
console.log("app");
} else if (item.rejected > 0) {
item.title = `rejected: ${item.rejected}`;
item.start = new Date(item.date);
item.end = new Date(item.date);
console.log("rej"); 
} else if (item.submitted > 0) {
item.title = `submitted: ${item.submitted}`;
item.start = new Date(item.date);
item.end = new Date(item.date);
console.log("sub");
} else {
item.title = `Not Submitted: ${item.saved}`;
item.start = new Date(item.date);
item.end = new Date(item.date);
console.log("not");
}
console.log("1st item",item);
return item;
});
rejectData.map((secitem, index) => {
if(secitem.rejected > 0){
secitem.title = `rejected: ${secitem.rejected}`;
secitem.start = new Date(secitem.date);
secitem.end = new Date(secitem.date);
console.log("2nd secitem",secitem);
}
else{
console.log('empty strusidohjaskj jas');
}

//  return item;
});
const tdate = [...countData];
const rejdate = [...rejectData];
this.setState({
countData: {
data: [...tdate],
},
rejectData: {
data: [...rejdate],
},
});
})

response.data.result

{
(3) [{…}, {…}, {…}]
0:
approved: 2
date: "12-March-2021"
end: Fri Mar 12 2021 00:00:00 GMT+0530 (India Standard Time) {}
id: 3
not_submitted: 4
rejected: 2
start: Fri Mar 12 2021 00:00:00 GMT+0530 (India Standard Time) {}
submitted: 0
title: "rejected: 2"
__proto__: Object
1:
approved: 0
date: "07-March-2021"
id: 1
not_submitted: 4
rejected: 0
submitted: 0
__proto__: Object
2:
approved: 2
date: "10-March-2021"
end: Wed Mar 10 2021 00:00:00 GMT+0530 (India Standard Time) {}
id: 2
not_submitted: 4
rejected: 2
start: Wed Mar 10 2021 00:00:00 GMT+0530 (India Standard Time) {}
submitted: 0
title: "rejected: 2"
__proto__: Object
length: 3
__proto__: Array(0)
}

我在日历事件中使用了这些数据

events={[
...this.state.countData.data,
...this.state.rejectData.data,
]}

预期结果https://i.stack.imgur.com/vX17d.jpg