我如何根据条件得到数组react js中对象的总和

Question

为什么，我想显示我的仪表板从数组中的数组中的人的总数，数组的值为(名称:4s114)，从INDICATORI数组。应该是1.

我已经试过了:dashboard.js

const [popular, setPopular] = useState([]);
useEffect(() => {
fetchPopular();
}, []);
const fetchPopular = async () => {
const data = await fetch('http://localhost:8080/api/participanti');
const participanti = await data.json();
console.log(participanti);
setPopular(participanti.rows);

};

<div>
return (
{popular.map((participant) => {
return <Participant key={participant.id} participant={participant} />;

})}
</div>

console.log(participanti)输出

"rows": [
{
"id": "15f806ec-79cf-498f-8a4d-8bc8fdf8c43e",
"Nume": "negrea",
"Prenume": "ioana",
"Varsta": 40,
"createdAt": "2022-04-27T13:17:05.000Z",
"updatedAt": "2022-04-27T13:17:05.000Z",
"deletedAt": null,
"INDICATORI": [
{
"id": "068170b3-7995-41df-8fac-4f2bc577e2c6",
"Nume": "4S110",
"importHash": null,
"createdAt": "2022-04-10T15:58:58.000Z",
"updatedAt": "2022-04-10T15:58:58.000Z",
"deletedAt": null,
"createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
"updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
"participantiINDICATORIIndicatori": {
"createdAt": "2022-04-27T13:17:05.000Z",
"updatedAt": "2022-04-27T13:17:05.000Z",
"participantiId": "15f806ec-79cf-498f-8a4d-8bc8fdf8c43e",
"indicatoriId": "068170b3-7995-41df-8fac-4f2bc577e2c6"
}
}
],
"Cursuri": []
},
{
"id": "15f806ec-79cf-498f-8a4d-8bc8fdf8c43r",
"Nume": "Negrea",
"Prenume": "Paul",
"Varsta": 43,
"createdAt": "2022-04-27T13:17:05.000Z",
"updatedAt": "2022-04-27T13:17:05.000Z",
"deletedAt": null,
"INDICATORI": [
{
"id": "068170b3-7995-41df-8fac-4f2bc577e2c6",
"Nume": "4S110",
"importHash": null,
"createdAt": "2022-04-10T15:58:58.000Z",
"updatedAt": "2022-04-10T15:58:58.000Z",
"deletedAt": null,
"createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
"updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
"participantiINDICATORIIndicatori": {
"createdAt": "2022-04-23T13:52:40.000Z",
"updatedAt": "2022-04-23T13:52:40.000Z",
"participantiId": "cd60c561-56b7-4840-8c1e-03b9977c9a54",
"indicatoriId": "068170b3-7995-41df-8fac-4f2bc577e2c6"
}
},
{
"id": "26a19d05-f351-4097-a667-509518c028d6",
"Nume": "4S111.2",
"importHash": null,
"createdAt": "2022-04-10T15:58:47.000Z",
"updatedAt": "2022-04-10T15:58:47.000Z",
"deletedAt": null,
"createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
"updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
"participantiINDICATORIIndicatori": {
"createdAt": "2022-04-23T13:52:40.000Z",
"updatedAt": "2022-04-23T13:52:40.000Z",
"participantiId": "cd60c561-56b7-4840-8c1e-03b9977c9a54",
"indicatoriId": "26a19d05-f351-4097-a667-509518c028d6"
}
}
],
"Cursuri": []
},
{
"id": "c53d945e-4bb1-49ab-91ca-c9e046ac5de7",
"Nume": "Vlad",
"Prenume": "Negrea",
"Varsta": 43,
"createdAt": "2022-04-27T13:17:05.000Z",
"updatedAt": "2022-04-27T13:17:05.000Z",
"deletedAt": null,
"INDICATORI": [
{
"id": "068170b3-7995-41df-8fac-4f2bc577e2c6",
"Nume": "4S110",
"importHash": null,
"createdAt": "2022-04-10T15:58:58.000Z",
"updatedAt": "2022-04-10T15:58:58.000Z",
"deletedAt": null,
"createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
"updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
"participantiINDICATORIIndicatori": {
"createdAt": "2022-04-10T17:23:23.000Z",
"updatedAt": "2022-04-10T17:23:23.000Z",
"participantiId": "c53d945e-4bb1-49ab-91ca-c9e046ac5de7",
"indicatoriId": "068170b3-7995-41df-8fac-4f2bc577e2c6"
}
},
{
"id": "1f163556-94ef-49a5-9d2d-067a9a193d71",
"Nume": "4S114.3",
"importHash": null,
"createdAt": "2022-04-10T15:58:27.000Z",
"updatedAt": "2022-04-10T15:58:27.000Z",
"deletedAt": null,
"createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
"updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
"participantiINDICATORIIndicatori": {
"createdAt": "2022-04-10T17:23:23.000Z",
"updatedAt": "2022-04-10T17:23:23.000Z",
"participantiId": "c53d945e-4bb1-49ab-91ca-c9e046ac5de7",
"indicatoriId": "1f163556-94ef-49a5-9d2d-067a9a193d71"
}
},
{
"id": "846af8c5-e51a-4536-b68a-febc93ecfe26",
"Nume": "4S114",
"importHash": null,
"createdAt": "2022-04-10T15:57:47.000Z",
"updatedAt": "2022-04-10T15:57:47.000Z",
"deletedAt": null,
"createdById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
"updatedById": "193bf4b5-9f07-4bd5-9a43-e7e41f3e96af",
"participantiINDICATORIIndicatori": {
"createdAt": "2022-04-10T17:23:23.000Z",
"updatedAt": "2022-04-10T17:23:23.000Z",
"participantiId": "c53d945e-4bb1-49ab-91ca-c9e046ac5de7",
"indicatoriId": "846af8c5-e51a-4536-b68a-febc93ecfe26"
}
}
],
"Cursuri": []
}
],
"count": 6
}

在我的participant.js组件

const Participant = ({participant}) => {

const Total=participant.INDICATORI.reduce((total, item) => total + (item.Nume == "4S114" ), 0)
const l = Total
console.log(l)
return (
<div>
<h5>{l}</h5>

</div>
);
};

export default Participant;

我得到的是所有喜欢0 0 1的人的回应(意思是2个人没有4s114，一个人有。)我只是想告诉我有(1)的人。谢谢你的帮助

Answer 1

在dashboard.js中，您应该有这样的内容:

const total = popular.reduce((total, participant) => total + participant.INDICATORI
.filter(indicator => indicator.Nume === "4S114").length,0)

这样，total包含符合条件的参与者数量

由于您需要遍历每个参与者，因此将此逻辑放在每个Participant组件中是没有意义的，而是放在Parent组件中。