web-dev-qa-db-fra.com

Devrait renvoyer une valeur à la fin de la fonction de flèche

Tout fonctionne bien, mais j'ai cet avertissement Expected to return a value at the end of arrow function array-callback-return, j'essaie d'utiliser forEach à la place map, mais <CommentItem /> ne s'affiche même pas. Comment le réparer?

  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
22
Ramzan Chasygov

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

Une meilleure approche de ce que vous essayez d'accomplir consiste d'abord à utiliser un .filter, puis un .map, comme ceci:

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

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

Si vous ne voulez pas de tableau ou pour renvoyer des données, utilisez plutôt forEach.

33
Zanon

Le problème semble être que vous ne retournez pas quelque chose si votre premier cas if- est faux.

L'erreur que vous obtenez indique que votre fonction de flèche (comment) => { n'a pas d'instruction de retour. Bien que ce soit le cas lorsque votre cas if- est vrai, il ne renvoie rien pour ce qui 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.
  }
});

edit vous devriez jeter un oeil à la réponse de Kris pour savoir comment mieux mettre en œuvre ce que vous essayez de faire.

4
Chris

La réponse la plus élevée, de Kris Selbekk, est tout à fait juste. Il est important de souligner que cela prend une approche fonctionnelle, vous allez parcourir le tableau this.props.comments deux fois. La deuxième fois (en boucle), il est probable que vous éviterez quelques éléments filtrés, mais au cas où aucun comment ne serait filtré boucle à travers le tableau entier deux fois. Si la performance n'est pas un problème dans votre projet, c'est très bien. Si les performances sont importantes, 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 je le signale est que, en tant que développeur junior, j'ai commis beaucoup d'erreurs (comme boucler plusieurs fois le même tableau), j'ai donc pensé qu'il valait la peine de le mentionner ici.

PS: Je reformulerais encore plus votre composante de réaction, car je ne suis pas en faveur de la logique lourde dans le html part d'une JSX, mais c'est hors du sujet de cette question.

0
Anderson Saunders

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