ES6 -遍历对象中的键，然后分配给新对象

Question

在页面加载时，我调用一个元数据API，它返回一个以元数据类型作为键名的对象，以及一个元数据对象数组作为值，如下所示：

​

​

元数据对象需要进行简化和修改，以便很好地处理我的React输入组件(每个对象将是一个单独的复选框或带有值和标签的单选按钮)。我基本上需要返回相同的格式，但使用的是值和标签键，而不是id、display_on、name等。我在容器组件中做了以下操作，以修改可以通过道具传递给表单组件的数据。问题是metadataFormattedForInput总是返回一个空对象。

function mapStateToProps(state, ownProps) {
  const metadataFormattedForInput = {};
  Object.keys(state.metadata).forEach((key) => {
    const metadataOptions = [];
    state.metadata[key].map(option => (
      metadataOptions.push({ value: option.id, label: option.name })
    ));
    return (
      Object.assign({}, metadataFormattedForInput, {
        [key]: metadataOptions,
      })
    );
  });

  return {
    metadataOptions: metadataFormattedForInput,
  };
}

Answer 1

罪魁祸首是您使用Object.assign的方式(您将这些属性添加到一个空对象中，因为它是在forEach调用中返回的)。然而，Object.assign是不必要的：

function mapStateToProps(state, ownProps) {
  const metadataFormattedForInput = {};

  Object.keys(state.metadata).forEach(key => {
    metadataFormattedForInput[key] = state.metadata[key].map(option =>
      ({ value: option.id, label: option.name })
    );
  });

  return {
    metadataOptions: metadataFormattedForInput,
  };
}

const metadata = {
  phaseofthegame: [{id: 1, name: 'foo'}],
  theme: [{id: 2, name: 'bar'}]
};

console.log(
  mapStateToProps({ metadata }).metadataOptions
);

如果您想继续使用Object.assign，那么可以将它与Array.reduce结合起来。

function mapStateToProps(state, ownProps) {
  const renameProps = (acc, key) => Object.assign(acc, {
    [key]: state.metadata[key].map(option =>
      ({ value: option.id, label: option.name })
    )
  });

  const metadataOptions =
    Object.keys(state.metadata).reduce(renameProps, {});

  return { metadataOptions };
}

Answer 2

下面是您的代码的一些问题：

• 您使用forEach的方式是错误的，forEach不返回任何值。如果您想返回一些值，请使用map。
• 而且，您正在使用map，并像使用forEach一样使用它--也就是说，您没有使用返回的值 函数mapStateToProps(state，ownProps) { let metadataFormattedForInput =ownProps key) => { let metadataOptions =state.metadatakey.map(选项=> ({ value: option.id，label: option.name } )；metadataFormattedForInputkey = metadataOptions；返回metadataFormattedForInput；}；{})；返回{ metadataOptions: metadataFormattedForInput，}；}

Answer 3

正如其他人所说的，以及其他一些问题：

• 在forEach回调中返回值没有任何影响
• 另一方面，map回调应该有一个返回值。
• Object.assign不改变第二个参数，因此根本不修改metadataFormattedForInput。

下面是一种实现此功能的方法，将Object.assign调用移到map之外，并使用扩展语法构建输出：

​

function mapStateToProps(state, ownProps) {
    return {
        metadataOptions: Object.assign(...Object.keys(state.metadata).map(key => (
            { [key]: state.metadata[key].map(option => (
                    { value: option.id, label: option.name }
                ))
            }
        )))
    };
}


var state = {
    metadata: {
        phaseofthegame: [
            { id: 123, display_on: ['a', 'b'], name: 'Attacking' },
            { id: 456, display_on: ['c', 'd'], name: 'Transition to Attack' },
        ],
        theme: [
            { id: 789, display_on: ['e', 'f'], name: 'Rondo' },
            { id: 101, display_on: ['g', 'h'], name: 'Defending Individually' },
        ]
    }
};

state = mapStateToProps(state);

console.log(JSON.stringify(state, null, 2));

.as-console-wrapper { max-height: 100% !important; top: 0; }

​