Javascript 预期在箭头函数结束时返回一个值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45014094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expected to return a value at the end of arrow function
提问by Ramzan Chasygov
Everything works fine, but i have this warning Expected to return a value at the end of arrow function array-callback-return, i try use forEachinstead map, but then <CommentItem />doesn't even show. How fix it?
一切工作正常，但我有这个警告Expected to return a value at the end of arrow function array-callback-return，我尝试使用forEach，而不是map，但后来<CommentItem />甚至不显示。怎么修？
return this.props.comments.map((comment) => {
if (comment.hasComments === true) {
return (
<div key={comment.id}>
<CommentItem className="MainComment"/>
{this.props.comments.map(commentReply => {
if (commentReply.replyTo === comment.id) {
return (
<CommentItem className="SubComment"/>
) // returnt
} // if-statement
}) // map-function
} // map-function __begin
</div> // comment.id
) // return回答by Zanon
A map()creates an array, so a returnis expected for all code paths (if/elses).
Amap()创建一个数组，因此return所有代码路径（if/elses）都需要 a。
If you don't want an array or to return data, use forEachinstead.
如果您不想要数组或返回数据，请forEach改用。
回答by Kris Selbekk
The warning indicates that you're not returning something at the end of your map arrow function in every case.
该警告表明您不会在每种情况下都在地图箭头函数的末尾返回某些内容。
A better approach to what you're trying to accomplish is first using a .filterand then a .map, like this:
更好的方法是首先使用 a .filter，然后使用 a .map，如下所示：
this.props.comments
.filter(commentReply => commentReply.replyTo === comment.id)
.map((commentReply, idx) => <CommentItem key={idx} className="SubComment"/>);
回答by Chris
The problem seems to be that you are not returning something in the event that your first if-case is false.
问题似乎是，如果您的第一个if-case 为 false ，您将不会返回某些内容。
The error you are getting states that your arrow function (comment) => {doesn't have a return statement. While it does for when your if-case is true, it does not return anything for when it's false.
您收到的错误表明您的箭头函数(comment) => {没有 return 语句。虽然它在您的if-case 为真时起作用，但在它为假时它不会返回任何内容。
return this.props.comments.map((comment) => {
if (comment.hasComments === true) {
return (
<div key={comment.id}>
<CommentItem className="MainComment" />
{this.props.comments.map(commentReply => {
if (commentReply.replyTo === comment.id) {
return (
<CommentItem className="SubComment"/>
)
}
})
}
</div>
)
} else {
//return something here.
}
});
edityou should take a look at Kris' answer for how to better implement what you are trying to do.
编辑您应该看看 Kris 的答案，以了解如何更好地实施您正在尝试做的事情。
回答by CrsCaballero
The easiest way onlyif you don't need return something it'ts just return null
最简单的方法只有当您不需要返回某些东西时return null
回答by Anderson Saunders
The most upvoted answer, from Kris Selbekk, it is totally right. It is important to highlight though that it takes a functional approach, you will be looping through the this.props.commentsarray twice, the second time(looping) it will most probable skip a few elements that where filtered, but in case no commentwas filtered you will loop through the whole array twice. If performance is not a concern in you project that is totally fine. In case performance is important a guard clausewould be more appropriated as you would loop the array only once:
来自 Kris Selbekk 的最受好评的答案是完全正确的。重要的是要强调它采用函数式方法，您将遍历this.props.comments数组两次，第二次（循环）它很可能会跳过一些已过滤的元素，但如果没有comment被过滤，您将遍历整个阵列两次。如果您的项目不关心性能，那完全没问题。如果性能很重要，aguard clause会更合适，因为您只会循环数组一次：
return this.props.comments.map((comment) => {
if (!comment.hasComments) return null;
return (
<div key={comment.id}>
<CommentItem className="MainComment"/>
{this.props.comments.map(commentReply => {
if (commentReply.replyTo !== comment.id) return null;
return <CommentItem className="SubComment"/>
})}
</div>
)
}
The main reason I'm pointing this out is because as a Junior Developer I did a lot of those mistakes(like looping the same array multiple times), so I thought i was worth mention it here.
我指出这一点的主要原因是因为作为初级开发人员，我犯了很多这样的错误（比如多次循环同一个数组），所以我认为我在这里值得一提。
PS: I would refactor your react component even more, as I'm not in favour of heavy logic in the html partof a JSX, but that is out of the topic of this question.
PS：我会重构你的反应成分就更多了，因为我赞成重逻辑的我不是html part的JSX，但就是这个问题的话题了。
回答by Srinivasan N
class Blog extends Component{
render(){
const posts1 = this.props.posts;
//console.log(posts)
const sidebar = (
<ul>
{posts1.map((post) => {
//Must use return to avoid this error.
return(
<li key={post.id}>
{post.title} - {post.content}
</li>
)
})
}
</ul>
);
const maincontent = this.props.posts.map((post) => {
return(
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
)
})
return(
<div>{sidebar}<hr/>{maincontent}</div>
);
}
}
const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById('root')
);