"Expected to return a value at end of arrow function" 경고를 수정하려면 어떻게 해야 합니까?

"Expected to return a value at end of arrow function" 경고를 수정하려면 어떻게 해야 합니까?

모든 게 잘 돌아가는데 경고 하나 하지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

A map()어레이를 작성하기 때문에return모든 코드 경로(if/eles)가 필요합니다.

어레이를 원하지 않거나 데이터를 반환하지 않는 경우forEach대신.

경고는 모든 경우에 지도 화살표 기능의 끝에 무언가를 반환하지 않음을 나타냅니다.

달성하려고 하는 것에 대한 보다 나은 접근법은 먼저 다음 명령어를 사용하는 것입니다..filter그 다음 a를.map, 다음과 같이 합니다.

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

반품할 필요가 없는 경우에만 가장 쉬운 방법은 그냥...return null

문제는 첫 번째 고객님이 반품하지 않으시는 것 같습니다.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 의 답변을 참조해 주세요.

가장 높은 투표율을 보인 대답은 크리스 셀벡이 말한 바로 그 답변이다.중요한 점은 기능적인 접근법이 필요하지만, 이 접근법에서는this.props.comments두 번 배열, 두 번째(루핑)는 필터링된 몇 가지 요소를 건너뛸 가능성이 높지만 그렇지 않은 경우comment필터링되었습니다.전체 어레이를2회루프합니다.당신의 프로젝트에서 퍼포먼스가 관심사가 아니라면 그건 전혀 문제없습니다.퍼포먼스가 중요한 경우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: 저는 당신의 반응 컴포넌트를 더욱 리팩터링하고 싶습니다.왜냐하면 저는 무거운 논리를 좋아하지 않기 때문입니다.html part의JSX그러나 그것은 이 질문의 주제에서 벗어났다.

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

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

언급URL : https://stackoverflow.com/questions/45014094/how-do-i-fix-expected-to-return-a-value-at-the-end-of-arrow-function-warning