Question

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

[{...},{...},{...},{...},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)

随后是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>

无论您在哪里看到{context}，我都希望能够通过对象的键来访问值。我实际上并不想显示所有{context}。这只是一个占位符。

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

0 个答案: