如何修复“预计在箭头函数末尾返回一个值”警告?
Posted
技术标签:
【中文标题】如何修复“预计在箭头函数末尾返回一个值”警告?【英文标题】:How do I fix "Expected to return a value at the end of arrow function" warning? 【发布时间】:2017-12-14 07:24:47 【问题描述】:一切正常,但我收到此警告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"/>
) // return
// if-statement
) // map-function
// map-function __begin
</div> // comment.id
) // return
【问题讨论】:
不进入if还有没有回报? 只有在commentReply.replyTo === comment.id
时才会返回。如果不是这种情况,您将不返回任何内容。只需将return null
放在if
块之后
Mikael Lennholm,我可以说,你是天才
@RamzanChasygov 某些语言不允许单分支 if
语句,因为它们会导致这样的问题。如果您总是、总是编写任何if
语句的else
分支,那么您会帮自己一个忙——if
代表一个fork 在你的代码中,所以你需要告诉程序每条路径上发生了什么;不只是一个。
【参考方案1】:
map()
创建一个数组,因此所有代码路径(if/elses)都需要一个return
。
如果您不想要数组或返回数据,请改用forEach
。
【讨论】:
这是一个简短而通用的解决方案。希望这是第一个位置【参考方案2】:警告表明,在每种情况下,您都没有在地图箭头函数的末尾返回某些内容。
更好的方法是先使用.filter
,然后使用.map
,如下所示:
this.props.comments
.filter(commentReply => commentReply.replyTo === comment.id)
.map((commentReply, idx) => <CommentItem key=idx className="SubComment"/>);
【讨论】:
如果找不到要过滤的匹配项怎么办 如果没有匹配过滤器的 cmets,将返回一个空数组。这将被传递给.map
,这又将是一个空操作。换句话说 - 如果没有匹配,则不会渲染任何内容。
正如 Zanon 在下面建议的那样,一个更简单且不太复杂的选择是简单地使用不期望返回任何内容的 forEach
,而不是期望返回某些内容的 map
。【参考方案3】:
最简单的方法仅如果您不需要返回东西,它只是return null
【讨论】:
按照@Zanon 的建议在这种情况下使用 forEach【参考方案4】:问题似乎是,如果您的第一个 if
-case 为假,您没有返回任何东西。
您收到的错误表明您的箭头函数(comment) =>
没有返回语句。虽然它适用于您的 if
-case 为 true 时,但它不会在它为 false 时返回任何内容。
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.
);
编辑您应该看看 Kris 的回答,了解如何更好地实施您正在尝试做的事情。
【讨论】:
【参考方案5】:克里斯·塞尔贝克(Kris Selbekk)给出的最受好评的答案是完全正确的。重要的是要强调它采用功能方法,您将循环通过 this.props.comments
数组两次,第二次(循环)它很可能会跳过一些过滤的元素,但如果没有 comment
被过滤了,你将遍历整个数组两次。如果您的项目不关心性能,那完全没问题。如果性能很重要,guard 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>
)
我指出这一点的主要原因是,作为一名初级开发人员,我犯了很多这样的错误(比如多次循环同一个数组),所以我认为我在这里值得一提。
PS:我会更多地重构你的 react 组件,因为我不赞成 html part
的 JSX
中的繁重逻辑,但这不在本问题的主题范围内。
【讨论】:
【参考方案6】:你可以像这样使用 for 循环:
for(let i = 0 ; i < comments.length; i++)
if(comments[i].hasComments === true)
return (
<div key=comments[i].id>
//content Here
</div> // comment.id
)
【讨论】:
【参考方案7】: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')
);
【讨论】:
您能否添加一些解释您的代码如何解决 OP 的问题?以上是关于如何修复“预计在箭头函数末尾返回一个值”警告?的主要内容,如果未能解决你的问题,请参考以下文章