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"/>
                 ) // returnt
                } // if-statement
              }) // map-function
              } // map-function __begin
            
          </div> // comment.id
          
        ) // return

Answer 1

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

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

Answer 2

警告表示您在每种情况下都没有在地图箭头功能的末尾返回任何内容。

更好地解决您尝试完成的问题的方法是首先使用.filter然后使用.map，如下所示：

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

Answer 3

问题似乎是，如果您的第一个if - 案例为假，您就不会返回某些内容。

您获得的错误表明您的箭头函数(comment) => {没有返回语句。虽然它适用于if - 情况为真的情况，但是当它为假时它不会返回任何内容。

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 4

来自克里斯·塞尔贝克（Kris Selbekk）的最令人支持的答案是完全正确的。重要的是要强调尽管它采用了一种功能性的方法，但是您将循环遍历this.props.comments数组两次，第二次（循环）它很可能会跳过一些在过滤后的元素，但是如果没有{ {1}}被过滤，您将遍历整个数组两次。如果您的项目中不关心性能，那完全可以。如果性能很重要，则comment会更适合，因为您只会循环一次数组：

guard clause

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

PS：由于我不赞成在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> ) }的{{1}}中使用笨拙的逻辑，因此我将进一步重构您的react组件，但这超出了这个问题的主题。

Answer 5

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

Answer 6

最简单的方法仅，如果您不需要退货，不仅return null

预计在箭头函数结束时返回一个值

6 个答案: