javascript - 如何从对象数组中显示对象的值？

Question

我正在使用 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)

其次是{context}在渲染方法，但我得到一个错误：

对象作为 React 子对象无效（找到：带有键 {LaserHost} 的对象）。如果您打算渲染一组子项，请改用数组。

我可以改为使用{context.toString()}，但这只是显示字符串“对象”的整个数组，而不是数组中每个对象的实际键和值。

渲染方法

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>

随处可见{context}，我希望能够通过对象的键访问值。我实际上不想显示所有{context}. 这只是一个占位符。

标签： javascriptreactjsredux