遍歷 JS object 的 arrays

Question

我有這個 object，我正試圖以一種形式循環，但真的無法讓它工作。 這是 object 的示例。

        const data = {
            "Social Security": [
                {
                    label: "Deduction Type", 
                    value: "Social Security", 
                    name: "SocialSecurity"
                },
                {
                    label: "Employer Rate", 
                    value: "12.4%", 
                    name: "SocialEmployer"
                },
                {
                    label: "Employee Rate", 
                    value: "6.2%", 
                    name: "SocialEmployee"
                }
            ],
            "Medicare": [
                {
                    label: "Deduction Type", 
                    value: "Medicare", 
                    name: "Medicare"
                },
                {
                    label: "Employer Rate", 
                    value: "1.45%", 
                    name: "MedicareEmployer"
                },
                {
                    label: "Employee Rate", 
                    value: "2.9%", 
                    name: "MedicareEmployee"
                }
            ]
        }

表單實現

        <Formik>
            {({ values, isSubmitting, resetForm, setFieldValue }) => (
            <Form id="payrollSettingsForm" >                        
                <Grid container className={classes.border}>
                    <Grid item xs={12} md={4}>
                        {Object.entries(data).map(arr =>{
                            Array.isArray(arr) && arr.map(elm =>{
                                return (<TextField 
                                    label={elm.label} 
                                    value={elm.value}  
                                    name={elm.name}  
                                />)
                            })
                        })}
                    </Grid>
                </Grid>

        ...rest of the form 
            </Form>
        </Formik>

嘗試了許多方法，例如 Object.fromEntries()。 forEach 我認為我可以找到示例並一直失敗的所有方法，也許我做錯了什么，任何幫助將不勝感激。

Answer 1

 {Object.entries(data).map(([key, val]) =>{
    val.map(elm =>{
      return (
        <TextField 
          label={elm.label} 
          value={elm.value}  
          name={elm.name}  
        />
      )
    })
  })}

Answer 2

Map 應該在每次迭代中返回一個元素。 如果您不想顯示 return null ，則返回react node 。

<Grid item xs={12} md={4}>
{Object.entries(data).map(arr => {
  Array.isArray(arr) ? arr.map(elm => {
    return (<TextField
      label={elm.label}
      value={elm.value}
      name={elm.name}
    />)
  }) : null
})}
</Grid>