遍历数组的JS对象

Question

我有这个对象，我正试图以一种形式循环，但真的无法让它工作。这是对象的示例。

        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]) =>{
    return val.map(elm =>{
      return (
        <TextField 
          label={elm.label} 
          value={elm.value}  
          name={elm.name}  
        />
      )
    })
  })}

Answer 2

Map 应该 return 每次迭代都有一个元素。如果你不想显示 return null else return a 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>

遍历数组的JS对象

Iterate over JS object of arrays

javascript

arrays

reactjs

nested-loops