反应从列表键中提取值答案

【问题标题】：React extract value from list-keys反应从列表键中提取值
【发布时间】：2017-07-02 19:03:55
【问题描述】：

 getEmployeeCredits(id) {
        if (this.state.company_roles) {
            return this.state.company_roles.map(function (cr, i) {
                if (cr.id  === id) {
                    return cr.assigned_credits
                }
            }.bind(this));
        }
    }

我想在这里返回值匹配的公司角色的分配信用。但是返回的值是：[undefined, undefined, undefined, "10000.0"]。

在此未定义的值是因为值不匹配的公司角色。我可以删除所有 undefined 值，然后只使用值 10000.0 但有更优雅的方法吗？

编辑：if (cr.id === id) 条件对于单个值将始终为真。

【问题讨论】：

标签： javascript arrays reactjs hashmap

【解决方案1】：

如果您想在数组中查找单个值，请使用Array.prototype.find。

根据您的示例进行调整：

const foundCompanyRoleItem = this.state.company_roles.find(crItem => crItem.id === id); return foundCompanyRoleItem.assigned_credits;

这将始终返回一个匹配的值，而不是像 .filter 一样的数组。

P.S.：我建议您的项目也使用 ES6 语法。在上面的示例中，您可以看到好处，因为我的示例使用了 ES6 中引入的箭头函数。它使表达更清晰，更合理。

【讨论】：

这似乎是实现我想要的最干净的方法。谢谢
我将研究在我的项目中使用 ES6 语法。它确实看起来更干净

【解决方案2】：

编辑：只是尝试...

return this.state.company_roles.filter(function (cr, i) {
                if (cr.id  === id) {
                    if(cr.assigned_credits!=undefined)
                       return cr.assigned_credits;
                    else 
                       return false;
                }

获取数组后，可以使用Array.prototype.filter删除未定义的值

例如：

var data = [42, 21, undefined, 50, 40, undefined, 9];

data = data.filter(function( element ) {
   return element !== undefined;
});

【讨论】：

没错，我可以从返回的cr.assigned_credits 中删除未定义的值。我想知道是否有办法只在 if 条件为真时返回 assigned_credits 的值，然后它只会返回单个值而不是数组
当然！让我试试。

【解决方案3】：

为什么不直接在 company_roles 上使用filter？

getEmployeeCredits(id) {
  if (this.state.company_roles) {
    return this.state.company_roles.filter(cr => cr.id  === id);
  }
}

【讨论】：

【解决方案4】：

这是因为 if 语句只对一个值为真，其余的都隐式返回 undefined。

getEmployeeCredits(id) {
            if (this.state.company_roles) {
                return this.state.company_roles.map(function (cr, i) {
                    if (cr.id  === id) {
                        return cr.assigned_credits
                    }
                    else 
                       return undefined;
                }.bind(this));
            }
        }

所以你需要解决它

return this.state.company_roles.filter((role) => role.id ===id ).assigned_credits;

【讨论】：

【解决方案5】：

Array.map 将一个数组中的所有值转换为另一个数组，并且两个数组的长度始终相同。如果你想从上面提到的数组中提取单个对象Array.filter 或Array.find 会更好地用于此目的。请记住，Array.find 是 ES6 标准的一部分，这意味着某些浏览器可能不支持它。

【讨论】：