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

Question

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

需要简化和更改元数据对象，以便与我的 React 输入组件很好地配合使用(每个对象将是一个单独的复选框或带有值和标签的单选按钮)。我基本上需要返回相同的格式，但使用 value 和 label 键而不是 id、display_on、name 等。我在我的容器组件中执行以下操作以更改准备好通过 props 传递到我的表单组件的数据。问题是 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 };
}