我试图用delete: false过滤掉对象，然后只映射并将此对象渲染到屏幕，但我不知道如何让它工作。
示例对象
{
"8xf0y6ziyjabvozdd253nd": {
"id": "8xf0y6ziyjabvozdd253nd",
"timestamp": 1467166872634,
"title": "Udacity is the best place to learn React",
"body": "Everyone says so after all.",
"author": "thingtwo",
"category": "react",
"voteScore": 6,
"deleted": false
}
}
查找键和地图的方法。
const {posts} = this.props
return _.find(posts, { 'deleted': false })_.map(posts, post => {
return (
<div key={post.id}>
答案 0 :(得分：4)
基本上，您可以直接将lodash#reduce应用于Object，而不是先获取所有键，然后再次迭代。使用reduce，您可以执行地图并一起过滤。
_.reduce(obj, (i, v, k)=> !v.deleted && !(i[k] = v) || i, {});
让我们为您创建一个工作示例，以下是代码段：
var obj = {
"9ny0z4ziyjabvozdc713dr": {
"id": "9ny0z4ziyjabvozdc713dr",
"timestamp": 1467166879723,
"title": "StackOverfow is the best place to learn Angular",
"body": "bla bla bla bla.",
"author": "myself",
"category": "angular",
"voteScore": 9,
"deleted": true
},
"8xf0y6ziyjabvozdd253nd": {
"id": "8xf0y6ziyjabvozdd253nd",
"timestamp": 1467166872634,
"title": "Udacity is the best place to learn React",
"body": "Everyone says so after all.",
"author": "thingtwo",
"category": "react",
"voteScore": 6,
"deleted": false
}
}
var finalObj =_.reduce(obj, (i, v, k)=> !v.deleted && !(i[k] = v) || i, {});
console.log(finalObj);<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
修改
对于特定情况（OP），只需删除一些键/值对并构造一个新对象，tehn最好使用lodash#omitBy来简单地从一个对象中删除一些条件。以下是此特定用法的简单示例。
_.omitBy(obj, o=>o.deleted);
以下是此示例的代码段：
var obj = {
"9ny0z4ziyjabvozdc713dr": {
"id": "9ny0z4ziyjabvozdc713dr",
"timestamp": 1467166879723,
"title": "StackOverfow is the best place to learn Angular",
"body": "bla bla bla bla.",
"author": "myself",
"category": "angular",
"voteScore": 9,
"deleted": true
},
"8xf0y6ziyjabvozdd253nd": {
"id": "8xf0y6ziyjabvozdd253nd",
"timestamp": 1467166872634,
"title": "Udacity is the best place to learn React",
"body": "Everyone says so after all.",
"author": "thingtwo",
"category": "react",
"voteScore": 6,
"deleted": false
}
}
var finalObj =_.omitBy(obj, o=>o.deleted);
console.log(finalObj);<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
但是，如果需要在（Array或Object）之间进行任何转换，或者需要自定义输出类型，那么我仍然建议使用reduce。
答案 1 :(得分：3)
如果要过滤，最简单的方法是使用实际的过滤器。我对React不太熟悉，但如果React支持更复杂的链，下面的Lodash链将起作用。
我注意到你有一个嵌套对象，如果这是故意的，那么下面的代码就可以解决这个问题：
// I added some fake posts to make the data more illustrative
let posts = [{
"8xf0y6ziyjabvozdd253nd": {
"id": "8xf0y6ziyjabvozdd253nd",
"timestamp": 1467166872634,
"title": "Udacity is the best place to learn React",
"body": "Everyone says so after all.",
"author": "thingtwo",
"category": "react",
"voteScore": 6,
"deleted": false
}
}, {
"8888ziyjabvozdd253nd": {
"id": "8888ziyjabvozdd253nd",
"timestamp": 1467166872634,
"title": "Udacity is the best place to learn React",
"body": "Everyone says so after all.",
"author": "thingtwo",
"category": "react",
"voteScore": 6,
"deleted": true
}
}, {
"77776ziyjabvozdd253nd": {
"id": "77776ziyjabvozdd253nd",
"timestamp": 1467166872634,
"title": "Udacity is the best place to learn React",
"body": "Everyone says so after all.",
"author": "thingtwo",
"category": "react",
"voteScore": 6,
"deleted": false
}
}, {
"6666ziyjabvozdd253nd": {
"id": "6666ziyjabvozdd253nd",
"timestamp": 1467166872634,
"title": "Udacity is the best place to learn React",
"body": "Everyone says so after all.",
"author": "thingtwo",
"category": "react",
"voteScore": 6,
"deleted": true
}
}, {
"55556ziyjabvozdd253nd": {
"id": "55556ziyjabvozdd253nd",
"timestamp": 1467166872634,
"title": "Udacity is the best place to learn React",
"body": "Everyone says so after all.",
"author": "thingtwo",
"category": "react",
"voteScore": 6,
"deleted": false
}
}];
// you'd just return _(posts) here directly, but I'm assigning a variable so we can show the console log for this snippet
const filteredPosts = _(posts)
.filter(post => {
const objectKey = Object.keys(post)[0];
const innerData = post[objectKey];
return innerData.deleted === false
})
.map(post => {
const objectKey = Object.keys(post)[0];
// your return would be in the format of <div key={objectKey}>
return `<div key={${objectKey}}>`
})
.valueOf();
console.log(filteredPosts);<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
如果对象的嵌套不是故意的，那么获取信息将更直接，更清晰。如果您的实际对象看起来像我下面的示例对象，您可以访问如下数据：
let posts = [{
"id": "8xf0y6ziyjabvozdd253nd",
"timestamp": 1467166872634,
"title": "Udacity is the best place to learn React",
"body": "Everyone says so after all.",
"author": "thingtwo",
"category": "react",
"voteScore": 6,
"deleted": false
}, {
"id": "8888ziyjabvozdd253nd",
"timestamp": 1467166872634,
"title": "Udacity is the best place to learn React",
"body": "Everyone says so after all.",
"author": "thingtwo",
"category": "react",
"voteScore": 6,
"deleted": true
}, {
"id": "77776ziyjabvozdd253nd",
"timestamp": 1467166872634,
"title": "Udacity is the best place to learn React",
"body": "Everyone says so after all.",
"author": "thingtwo",
"category": "react",
"voteScore": 6,
"deleted": false
}];
// you'd just return _(posts) here directly, but I'm assigning a variable so we can show the console log for this snippet
const filteredPosts = _(posts)
.filter(post => {
return post.deleted === false
})
.map(post => {
// your return would be in the format of <div key={post.id}>
return `<div key={${post.id}}>`
})
.valueOf();
console.log(filteredPosts);<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
答案 2 :(得分：1)
_.find的结果是一个数组，因此，如果您想要map该数组中的元素，您应该_.map(result)
const {posts} = this.props;
return _.map(_.find(posts, { 'deleted': false }), post => {
return (
<div key={post.id}>
答案 3 :(得分：0)
你可以用以下方式做到这一点
let obj = {
"8xf0y6ziyjabvozdd253nd": {
"id": "8xf0y6ziyjabvozdd253nd",
"timestamp": 1467166872634,
"title": "Udacity is the best place to learn React",
"body": "Everyone says so after all.",
"author": "thingtwo",
"category": "react",
"voteScore": 6,
"deleted": false
}
}
let result = Object.keys(obj).reduce((a, b) =>{
if(obj[b].deleted != false){
a[b] = obj[b];
}
return a;
}, {});
console.log(result);
答案 4 :(得分：0)
如果您想跳过lodash，javascript数组的原生API将为您提供如下解决方案：
const { posts } = this.props;
return posts
.find(post => !post.deleted)
.map(post => {
return (
<div key={post.id}>...