Javascript 如何显示对象数组中对象的值？

我正在使用Redux进行状态管理，我的状态是一个对象数组。它看起来是这样的：我不喜欢它是一个数组，我只需要能够通过一个键显示对象值，因为有很多对象，每个对象都需要显示在特定的区域中。

[{...},{...},{...},{...},etc..]

如何通过特定对象的键来最佳显示该对象的值

减速器：

const contextReducer = (state=null, action) => {
    switch(action.type){
        case 'CONTEXTUALIZE':
            state =  Object.values(action.payload)
            state = state.filter(o => (o === state[0] || o === state[3]))
            state = Object.assign(...state)
            state = Object.keys(state).map(key => ({[key]: state[key]}))
            console.log(state)
            return state
        default:
            return state
    }
}

export default contextReducer

const context = useSelector(state => state.contextReducer)

我的尝试：

const contextReducer = (state=null, action) => {
    switch(action.type){
        case 'CONTEXTUALIZE':
            state =  Object.values(action.payload)
            state = state.filter(o => (o === state[0] || o === state[3]))
            state = Object.assign(...state)
            state = Object.keys(state).map(key => ({[key]: state[key]}))
            console.log(state)
            return state
        default:
            return state
    }
}

export default contextReducer

const context = useSelector(state => state.contextReducer)

在render方法中后跟

{context}

，但我得到一个错误：

对象作为React子对象无效（找到：具有键的对象 {LaserHost}）。如果要渲染子对象集合，请使用 而不是数组

我可以改为使用

{context.toString（）}

，但这只是显示字符串“object”的整个数组，而不是数组中每个对象的实际键和值

渲染方法

export default function ContextPanel() {
  const classes = useStyles();
  const context = useSelector(state => state.contextReducer)on={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <div>
            <Typography className={classes.heading}>{context}</Typography>
          </div>
          <div className={classes.nameColumn}>
            <Typography className={classes.heading}>{context}</Typography>
          </div>
          <div>
            <Typography className={classes.heading}>{context}</Typography>
          </div>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>
            {context}
          </Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>

导出默认函数ContextPanel（）{
const classes=useStyles（）；
={}上的const context=useSelector（state=>state.contextReducer）
aria controls=“panel1a内容”
id=“panel1a标题”
>
{context}
{context}
{context}
{context}

---

无论您在哪里看到

{context}

，我都希望能够通过对象的键访问值。我实际上不想显示所有

{context}

。这只是一个占位符。

您能在render方法中添加代码吗？看起来您试图在render方法中显示数组，而不通过它们进行映射，这是您不能用对象或数组来做的。@paruchuri-p是的，我现在就这样做。我不知道如何实现映射，因为对象的数组“我拥有的状态分别对应于页面的不同部分。请遵循以下说明：看起来你的Redux还原器和选择器是混合的。它们的职责不同。还原器处理操作，不应在商店外使用。@Emilebergron我有点理解你的意思，并且已经阅读了那篇文章，但是，我仍然很抱歉。”对于我应该如何实现这一点有点困惑。我当前的选择器只是从状态获取所有数据，其背后的想法是这样我可以从整个状态访问单个项。您可以在render方法中添加代码吗？看起来您正在尝试在render方法中显示数组，而不通过它们进行映射，您可以这样做无法处理对象或数组。@paruchuri-p是的，我现在就这样做。我不知道如何实现映射，因为我拥有的对象数组状态分别用于页面的不同部分。只需遵循以下步骤：它看起来像是混合了Redux还原器和选择器。它们没有相同的职责。还原器处理操作和sho不能在店外使用。@Emilebergron我有点理解你的意思，并且已经阅读了那篇文章，但是，我仍然有点困惑我应该如何实现这一点。我当前的选择器只是从州获取所有数据，其背后的想法是这样我可以从整个州访问单个项目。

[{...},{...},{...},{...},etc..]