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

【问题标题】：How can use my object like a array using with map function如何使用 map 函数像数组一样使用我的对象
【发布时间】：2020-11-19 13:03:00
【问题描述】：

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] 我该怎么做。

这是错误信息。

如何处理这个问题？

【问题讨论】：

这能回答你的问题吗？ Get array of object's keys
您能否指定'blue' 的键或值'Blue'。许多答案告诉您如何获取密钥，但我怀疑您想要这些值。

标签： javascript reactjs array.prototype.map

【解决方案1】：

由于您尝试映射一个对象，您需要使用 Object.keys 来返回一个可以循环的对象键数组。

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

【讨论】：

谢谢@Omar
@HasanTezcan np，如果它解决了您的问题，请接受我的回答

【解决方案2】：

你可以如下使用：

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

【讨论】：

【解决方案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*/})

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：