如何将此对象转换为数组并在 React 中通过键访问值？

Question

我有一个带有很多键的对象。我需要将此对象转换为对象数组，但这样我仍然可以通过键访问每个对象的值。

我想从：

{'A': 123, 'B': 453, 'C': 4132}

到：

[{'A': 123}, {'B': 453}, {'C': 4132}]

我希望能够使用诸如'A'或 之类的键访问值，分别'B'返回123和453。

我正在使用 Redux，目前我的减速器如下所示：

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)
            console.log(state)
            return state
        default:
            return state
    }
}

export default contextReducer

Object.values(state)我在之前尝试再次使用，return但这给了我一系列像这样的项目：

['A', 123, 'B', 453, 'C', 4132]

Answer 1

如果您想state以某种下拉样式的方式渲染对象或其一部分，您可以保持对象state不变，并state在渲染时迭代键和值，并将每个键值对传递给子对象成分。

例如：

render() {
    // ... get `state` from redux

    return (
        <div>
            { Object.keys(state).map(key => (
                <MyComponent key={ key } stateKey={ key } stateValue={ state[key] }/>
            ) }
        </div>
    )
}

注意：我们同时使用了 propskey和props，stateKey因为keyprops 是 React 中用于标识身份的特殊 props，并且stateKey将在MyComponent.

原答案：

您可以使用键 with ，然后使用键 with 访问每个值，而不是尝试迭代对象的值state(with ) 。通过调用迭代键，并将每个键转换为包含单个键及其相应值的对象。Object.values(state)Object.keys(state)state[key]map

Object.keys(state).map(key => ({[key]: state[key]}))

结果：

[ { A: 123 }, { B: 453 }, { C: 4132 } ]