[英]Js loop through array of objects
我有一個看起來像這樣的數組: let x = [{ pulse: 140 }, { oxygenSaturation: 89 }, { respiratoryRate: 35 }, { systolic: 80 }, { temperature: 40 }];
我的代碼:
const Vitals: React.FC<VitalsComponentProps> = ({ vitals, patientUuid }) => {
const { t } = useTranslation();
let x = [{ pulse: 140 }, { oxygenSaturation: 89 }, { respiratoryRate: 35 }, { systolic: 80 }, { temperature: 40 }];
console.log('vitals', x);
return (
<div>
{x.length ? (
x.map((vital: PatientVitals, ind) => (
<div>
<Grid className={styles.grid}>
<Row>
<Tile light>
<p>Temp</p>
<div className={styles.vitalValues}>
<p>
{vital.temperature} : {ind}
</p>
<p className={styles.unit}>°C</p>
</div>
</Tile>
<Tile light>
<p>Bp</p>
<div className={styles.vitalValues}>
<p>{vital.diastolic}</p>
<p className={styles.unit}> mmHg</p>
</div>
</Tile>
<Tile light>
<p>Heart rate</p>
<div className={styles.vitalValues}>
<p>{vital.pulse}</p>
<p className={styles.unit}>bpm</p>
</div>
</Tile>
</Row>
<Row>
<Tile light>
<p>Sp02</p>
<p>{vital.oxygenSaturation}</p>
<p className={styles.unit}>%</p>
</Tile>
<Tile light>
<p>R. Rate</p>
<p>{vital.respiratoryRate}</p>
<p className={styles.unit}>/ min</p>
</Tile>
</Row>
<Row>
<Tile light>
<p>Height</p>
<p>{vital.height}</p>
<p>cm</p>
</Tile>
<Tile light>
<p>Bmi</p>
<p>{vital.bmi}</p>
<p className={styles.unit}>kg / m²</p>
</Tile>
<Tile light>
<p>Weight</p>
<p>{vital.weight} </p>
<p className={styles.unit}>kg</p>
</Tile>
</Row>
</Grid>
<p className={styles.unit}>Sally Garnatt · 14:21</p>
</div>
))
) : (
<div>
<p className={styles.emptyText}>Vitals has not been recorded for this patient for this visit</p>
<Button
size="small"
kind="ghost"
renderIcon={ArrowRight16}
onClick={() => navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/chart` })}
iconDescription={t('vitalsForm', 'Vitals form')}>
{t('vitalsForm', 'Vitals form')}
</Button>
</div>
)}
</div>
);
};
我試圖獲取對象中的值並將它們顯示在不同的圖塊中,但是我的表被繪制了七次,盡管我正在循環遍歷我的數組。 我做錯了什么。 任何意見/建議將不勝感激。
你的數組應該看起來像
[{
pulse:140,
oxygenSaturation:89,
systolic:80
}]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.