反应：在 Object.keys 上调用过滤器答案

【问题标题】：React: Calling filter on Object.keys反应：在 Object.keys 上调用过滤器
【发布时间】：2017-08-05 09:13:50
【问题描述】：

一个 React 组件被传递一个 state 属性，它是一个对象的对象：

{
    things: {
        1: {
            name: 'fridge',
            attributes: []
        },
        2: {
            name: 'ashtray',
            attributes: []
        }
    }
}

它也被传递（作为路由器参数）name。我希望组件通过比较 name 值在 things 对象中找到匹配的对象。

为此，我使用filter 方法：

Object.keys(this.props.things).filter((id) => {
    if (this.props.things[id].name === this.props.match.params.name) console.log('found!');
    return (this.props.things[id].name === this.props.match.params.name);
});

但是这会返回undefined。我知道条件有效是因为我的测试行（console.log 行）将found 记录到控制台。为什么filter 方法返回undefined？

【问题讨论】：

你能显示你使用这个sn-p的整个代码吗？

标签： javascript reactjs filter

【解决方案1】：

Object.keys 返回一个键数组（在您的情况下可能是["2"]）。如果您有兴趣检索匹配的 object，那么您真的需要Object.values。如果你期待一个结果，而不是它们的数组，那么使用find 而不是filter：

Object.values(this.props.things).find((obj) => {
    if (obj.name === this.props.match.params.name) console.log('found!');
    return (obj.name === this.props.match.params.name);
});

如果您在函数中使用该结果，请务必return。这是一个基于您在 cmets 中提供的小提琴的 sn-p：

var state = {
    things: {
        1: {
            name: 'fridge',
            attributes: []
        },
        2: {
            name: 'ashtray',
            attributes: []
        }
    }
};

var findThing = function(name) {
  return Object.values(state.things).find((obj) => {
      if (obj.name === name) console.log('found!');
      return obj.name === name;
  });
}

var result = findThing('fridge');

console.log(result);

【讨论】：

谢谢 - 这似乎确实是一种更好的方法。但我还是看不出我的代码有什么问题？
也许您使用结果中不存在的属性引用来处理结果。或者，也许您多次调用此代码，但有时您会得到 console.log 输出。没有更多的上下文是不可能说出来的。你能提供一个演示这个问题的小提琴吗？
显然一个没有return的函数会返回undefined。
确实，感谢您的帮助。如果你想把它放在你的答案中，我会把它标记为正确的。

【解决方案2】：

您需要将过滤器的结果分配给一个对象，并且您得到的结果为[id]。然后你需要将对象作为this.props.things[id]

var data = {
    things: {
        1: {
            name: 'fridge',
            attributes: []
        },
        2: {
            name: 'ashtray',
            attributes: []
        }
    }
}

var name = 'fridge';
var newD = Object.keys(data.things).filter((id) => {
    if (data.things[id].name === name) console.log('found!');
    return (data.things[id].name === name);
});

console.log(data.things[newD]);

【讨论】：