如何修复“预计在箭头函数末尾返回一个值”警告？

Question

一切正常，但我收到此警告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

Answer 1

map() 创建一个数组，因此所有代码路径（if/elses）都需要一个return。

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

Answer 2

警告表明，在每种情况下，您都没有在地图箭头函数的末尾返回某些内容。

更好的方法是先使用.filter，然后使用.map，如下所示：

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

Answer 3

最简单的方法仅如果您不需要返回东西，它只是return null

Answer 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 的回答，了解如何更好地实施您正在尝试做的事情。

Answer 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 中的繁重逻辑，但这不在本问题的主题范围内。

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

Answer 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')
);