Question

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

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

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

为此，我使用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？

Answer 1

Object.keys返回一个键数组（例如，在你的情况下可能是["2"]）。如果您有兴趣检索匹配的对象，那么您确实需要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。以下是基于您在评论中提供的小提琴的片段：

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);

Answer 2

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

＆＃13;

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]);

＆＃13;

React：在Object.keys上调用过滤器

2 个答案: