我如何根据条件获取数组中对象的总和反应js

Question

hy，我想从 INDICATORI 数组中的数组中的数组中显示我的仪表板中的总人数，该数组的值为 (Nume:4s114)。应该是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（参与者）输出为

 "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，一个 does.i 只想显示 1 有（1）的人。感谢您的帮助

Answer 1

在dashboard.js中，你应该有这样的东西：

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

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

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

我如何根据条件获取数组中对象的总和反应js

How do i get the sum of object in arrays react js based on condition

reduce

components

dictionary

filter

reactjs