如何像使用 map 函数的数组一样使用我的对象

Question

import React, { useContext } from 'react'

import styles from './subTheme-select.module.css'
import StoreContext from '../store'

const SUB_THEME = {
  blue: 'Blue',
  yellow: 'Yellow',
  pink: 'Pink',
  purple: 'Purple',
  orange: 'Orange',
  green: 'Green'
}

function SubThemeSelect() {
  const store = useContext(StoreContext)

  return (
    <div className={styles.container}>
      {SUB_THEME.map((subTheme) => (
        <label className={styles.label}>
          <input
            type="radio"
            value={subTheme}
            name={subTheme}
            checked={subTheme === store.subTheme}
            onChange={(e) => store.changeSubTheme(e.target.value)}
          />
          {SUB_THEME[subTheme]}
        </label>
      ))}
    </div>
  )
}

export default SubThemeSelect

我想要一个像 SUB_THEME 这样的数组 [blue, yellow, pink, purple, orange, green] 我该怎么做。

这是错误信息。

如何处理这个问题？

Answer 1

由于您正在尝试映射一个对象，因此您需要使用 Object.keys 其中 returns 您可以循环的对象键数组。

Object.keys(SUB_THEME).map((key,index) => {
 const subTheme = SUB_THEME[key]
 return (
 <label className={styles.label}>
          <input
            type="radio"
            value={subTheme}
            name={subTheme}
            checked={subTheme === store.subTheme}
            onChange={(e) => store.changeSubTheme(e.target.value)}
          />
          {subTheme}
        </label>
  )
})

Answer 2

您可以如下使用：

Object.keys(SUB_THEME).map( (key) => {
console.log(SUB_THEME[key]
})

Answer 3

您想要 Object.keys() 函数或 Object.values

const SUB_THEME = {
  blue: 'Blue',
  yellow: 'Yellow',
  pink: 'Pink',
  purple: 'Purple',
  orange: 'Orange',
  green: 'Green'
}
//this returns the keys
const theme_keys = Object.keys(SUB_THEME)
//this returns the values
const theme_values = Object.values(SUB_THEME)

然后你可以像这样映射它们

theme_keys.map( key => {/*code here*/})
theme_values.map( key => {/*code here*/})

Answer 4

 Object.keys(SUB_GROUPED).map(x => {
    console.log(x)
 })

Answer 5

首先使用Object.keys(SUB_THEME)获取对象键。

如何像使用 map 函数的数组一样使用我的对象

How can use my object like a array using with map function

javascript

reactjs

array.prototype.map