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

Question

A React component is passed a state property, which is an object of objects:

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

It is also passed (as a router parameter) a name . I want the component to find the matching object in the things object by comparing name values.

To do this I use the filter method:

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

However this returns undefined . I know the condition works because of my test line (the console.log line), which logs found to the console. Why does the filter method return undefined ?

Answer 1

Object.keys returns an array of keys (like maybe ["2"] in your case). If you are interested in retrieving the matching object , then you really need Object.values . And if you are expecting one result, and not an array of them, then use find instead of 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);
});

Be sure to return that result if you use it within a function. Here is a snippet based on the fiddle you provided in comments:

 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

You need to assign the result of filter to a object and you get the result as the [id] . You then need to get the object as 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]);