web-dev-qa-db-ja.com

矢印関数の最後に値を返すことが期待されています

すべて正常に動作しますが、この警告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
javascriptreactjsecmascript-6reduxreact-redux
38
Ramzan Chasygov

この警告は、すべての場合にマップ矢印関数の最後に何かを返すわけではないことを示しています。

あなたが達成しようとしているものへのより良いアプローチは、最初に.filterを使用し、次に.mapを使用することです。

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

map()は配列を作成するため、すべてのコードパス（if/elses）にreturnが必要です。

配列が必要ない場合やデータを返さない場合は、代わりにforEachを使用してください。

65
Zanon

問題は、最初のif- caseがfalseの場合に何かを返さないことです。

取得しているエラーは、矢印関数(comment) => {にreturnステートメントがないことを示しています。 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.
  }
});

編集あなたがやろうとしていることをよりうまく実装する方法については、クリスの答えを見てください。

6
Chris

クリス・セルベックからの最も賛成の答えは、まったく正しいです。機能的なアプローチを取ることを強調することが重要です、あなたはthis.props.comments配列を2回ループし、2回目（ループ）は最も可能性が高いいくつかの要素をスキップしますが、commentがない場合フィルタリングされた場合、配列全体を2回ループします。プロジェクトでパフォーマンスが問題にならない場合は、まったく問題ありません。パフォーマンスが重要な場合は、配列を1回だけループするので、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：JSXのhtml partの重いロジックを好まないので、反応コンポーネントをさらにリファクタリングしますが、それはこの質問のトピック外です。

1
Anderson Saunders

最も簡単な方法のみ何かを返す必要がない場合は、単にreturn null

0
CrsCaballero
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')
);
0
Srinivasan N