Javascript “我该如何解决？”；应在箭头函数“的末尾返回一个值”；警告

一切正常，但我有一个警告

预期将在arrow函数数组回调return的末尾返回一个值

。我尝试使用

forEach

而不是

map

，但是

甚至没有显示出来。我该如何解决这个问题

返回这个.props.comments.map（（comment）=>{
if（comment.hasComments===true）{
返回(
{this.props.comments.map（commentReply=>{
如果（commentReply.replyTo==comment.id）{
返回(
)//返回
}//if语句
})//映射函数
}//映射函数\u\u开始
//comment.id
)//return

警告表示在任何情况下，您都没有在map arrow函数的末尾返回某些内容

更好的方法是先使用

.filter

，然后使用

.map

，如下所示：

this.props.comments
  .filter(commentReply => commentReply.replyTo === comment.id)
  .map((commentReply, idx) => <CommentItem key={idx} className="SubComment"/>);

this.props.comments
.filter（commentReply=>commentReply.replyTo===comment.id）
.map（（commentReply，idx）=>）；

问题似乎在于，如果第一个

if

-case为false，则您没有返回某些内容

您得到的错误表明，箭头函数

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

返回这个.props.comments.map（（comment）=>{
if（comment.hasComments===true）{
返回(
{this.props.comments.map（commentReply=>{
如果（commentReply.replyTo==comment.id）{
返回(
)
}
})
}
)
}否则{
//在这里归还一些东西。
}
});

---

编辑您应该看看Kris的答案，了解如何更好地实现您正在尝试的操作。

a

map（）

创建一个数组，因此所有代码路径（if/else）都需要返回一个

return

---

如果您不想要数组或返回数据，请改用

forEach

。

Kris Selbekk的最上等答案是完全正确的。需要强调的是，尽管它采用函数方法，但您将在

this.props.comments

数组中循环两次，第二次（循环）它很可能会跳过一些过滤的元素，但是如果没有

注释

被过滤，您将在整个数组中循环两次。如果性能不是您项目中的一个问题，那么这是完全正确的。如果性能很重要，则

保护子句将更合适，因为您将仅在nce：

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

返回这个.props.comments.map（（comment）=>{
如果（！comment.hasComments）返回null；
返回(
{this.props.comments.map（commentReply=>{
if（commentReply.replyTo！==comment.id）返回null；
返回
})} 
) 
}

我指出这一点的主要原因是，作为一名初级开发人员，我犯了很多这样的错误（比如多次循环同一个数组），所以我认为我在这里值得一提

PS：我将进一步重构您的react组件，因为我不赞成在
JSX
的
html部分中使用繁重的逻辑，但这不属于本问题的主题。

类博客扩展组件{
render（）{
const posts1=this.props.posts；
//控制台日志（posts）
常量边栏=(

{posts1.map（（post）=>{
//必须使用return以避免此错误。
返回(

{post.title}-{post.content}

)
})
}

);
const maincontent=this.props.posts.map（（post）=>{
返回(
{post.title}
{post.content}

)
})
返回(
{sidebar}
{maincontent}
);
}
}
常数员额=[
{id:1，标题：'Hello World'，内容：'Welcome to learning React！'}，
{id:2，标题：“安装”，内容：“您可以从npm安装React”。}
];
ReactDOM.render(
,
document.getElementById（'root'））
)；
最简单的方法仅如果你不需要返回某个东西，它只是
返回null
如果你不进入if，还有其他返回吗？你只返回if
commentReply.replyTo==comment.id
。如果不是这样，你什么都不返回。只要在
if之后加上
return null
blockMikael Lennholm我可以说你是genius@RamzanChasygov有些语言不允许使用单分支
if
语句，因为它们会导致类似这样的问题。如果您总是，总是编写任何
if
语句的
else
分支–
if
代表您的合作伙伴中的一个分支，那将是对自己的一种帮助de，所以您需要告诉程序在每条路径上发生了什么；而不仅仅是一条路径。这是一个简短而通用的解决方案。希望这是第一个问题。您可以添加一些说明，说明您的代码如何解决OP的问题吗？如果找不到匹配的筛选器如果没有与筛选器匹配的注释，将返回一个空数组。该数组将传递到
.map
，这反过来将是一个不可操作的选项。换句话说，如果没有匹配，将不会呈现任何内容。正如Zanon在下面建议的，一个更简单、更简单的选项是使用不希望返回任何内容的
forEach
，而不是使用确实希望返回某些内容的
map
。在这种情况下，只需按照@Za的建议使用forEach即可不