我如何根據條件獲得陣列中物件的總和反應js

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(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
}

在我的參與者.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 顯示有（1）的人。感謝您的幫助

uj5u.com熱心網友回復：

在dashboard.js中，你應該有這樣的東西：

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

這樣，total包含符合您條件的參與者數量

由于您需要遍歷每個參與者，因此將此邏輯放在每個組件中是沒有意義的Participant，而是放在 Parent 組件中。

標籤：反应 字典 筛选 组件 减少

上一篇：Python：將字典附加到字典串列中

下一篇：ReactNative更新JSON物件陣列onChangeText，索引未定義