Question

我不明白为什么我可以将Object.keys与.map()一起用于组件，而不是来自lodash的mapKeys。

<ul>
    {/* Working */}
    {Object.keys(this.props.departments).map(key => this._renderDepartments(key, this.props.departments[key]))}

    {/* Not working */}
    {mapKeys(this.props.departments, (hash, department ) => {return this._renderDepartments(hash, department);})}
</ul>

从示例中使用Lodash时反应生成的错误

Error: Objects are not valid as a React child

Answer 1

_。mapKeys将对象和函数作为参数。回调将值作为参数1传递，将密钥作为参数2传递。例如：

const mapped = _.mapKeys({ 'a': 1, 'b': 2 }, (value, key) => {
  return key + value;
});

console.log(mapped); // { 'a1': 1, 'b2': 2 }

请记住返回 mapKeys回调中的值。这将改变返回对象中的键。

我认为你只是误解了mapKeys的作用 - 它操纵键值并使用回调中返回的字符串返回对象，这看起来不像你所追求的那样。坚持Object.keys().map()。

Answer 2

根据lodash documentation，_.mapkeys函数应如下所示：

_.mapKeys(hash, => (value, key) {
  return key + value;
});

其中Object.keys返回您迭代的键数组。

在您的具体情况下，代码应该是：

<ul>
{values(mapKeys(this.props.departments, (department, hash) => 
  {
    return this._renderDepartments(hash, department);
  }))
}
</ul>

Answer 3

感谢@psilocybin我现在明白这不是我的反应需求的正确解决方案。创建Lodash函数是为了操纵对象，总是返回一个新对象。

我通过创建一个可以在整个代码中使用的辅助函数解决了我的问题。

mapObject功能

export default (object, callback) => {
    return Object.keys(object || {}).map(key => {return callback(key, object[key]);});
};

<强>用法

<ul className="DEPARTMENTPICKER_departments">
    {mapObject(this.props.departments, (hash, department) => this._renderDepartments(hash, department))}
</ul>

在反应组件触发错误中使用Lodash mapKeys

3 个答案: