Comment corriger l'avertissement "Attendu pour retourner une valeur à la fin de la fonction flèche" ?

Question

Tout fonctionne bien, mais j'ai cet avertissement Expected to return a value at the end of arrow function array-callback-return . J'ai essayé d'utiliser forEach au lieu de map mais alors <CommentItem /> ne se montre même pas. Comment puis-je réparer cela ?

  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

A map() crée un tableau, donc un return est attendu pour tous les chemins de code (if/elses).

Si vous ne voulez pas de tableau ou retourner des données, utilisez forEach à la place.

Answer 2

L'avertissement indique que vous ne retournez pas toujours quelque chose à la fin de votre fonction flèche de carte.

Une meilleure approche de ce que vous essayez d'accomplir est d'utiliser d'abord une .filter et ensuite un .map comme ceci :

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

Answer 3

Le problème semble être que vous ne renvoyez pas quelque chose dans le cas où votre premier if -est faux.

L'erreur que vous obtenez indique que votre fonction de flèche (comment) => { n'a pas de déclaration de retour. Alors qu'il le fait pour quand votre if -est vrai, il ne renvoie rien lorsqu'il est faux.

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

---

modifier vous devriez jeter un coup d'œil à la réponse de Kris pour savoir comment mieux mettre en œuvre ce que vous essayez de faire.

Answer 4

La réponse la plus votée, celle de Kris Selbekk, est tout à fait juste. Il est important de souligner qu'il s'agit d'une approche fonctionnelle, vous bouclerez à travers le fichier this.props.comments deux fois, la deuxième fois (en boucle), il est probable qu'il saute quelques éléments qui ont été filtrés, mais dans le cas où il n'y a pas de comment a été filtré, vous bouclerez deux fois dans le tableau entier. Si la performance n'est pas un problème dans votre projet, c'est parfait. Si la performance est importante, un guard clause serait plus approprié car vous ne boucleriez le tableau qu'une seule fois :

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

La raison principale pour laquelle j'attire l'attention sur ce point est qu'en tant que développeur junior, j'ai fait beaucoup de ces erreurs (comme boucler le même tableau plusieurs fois), et j'ai donc pensé que cela valait la peine de le mentionner ici.

PS : Je remanierais encore plus votre composant react, car je ne suis pas en faveur d'une logique lourde dans l'élément html part d'un JSX mais cela ne fait pas partie du sujet de cette question.

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