Prévu pour renvoyer une valeur à la fin de la flèche en fonction de

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 au lieu map, mais alors <CommentItem /> ne s'affiche même pas. Comment résoudre ce problème?

JS:

  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

Est-il un autre retour si vous n'entrez pas dans le si?
Vous retourner uniquement si commentReply.replyTo === comment.id. Si ce n'est pas le cas, vous n'avez rien retourner. Vient de mettre return null après la if bloc
Mikael Lennholm, pourrais-je dire, vous êtes des génies
certains langages ne permettent pas une seule branche if déclarations parce qu'elles conduisent à des problèmes de ce genre. Vous feriez-vous une faveur si vous avez toujours, toujours écrire le else branche de if de l'instruction if représente une fourchette dans votre code, vous devez indiquer au programme de ce qui se passe sur chaque chemin, pas seulement un.

InformationsquelleAutor Ramzan Chasygov | 2017-07-10

41

Le message d'avertissement indique que vous n'êtes pas retourner quelque chose à la fin de votre carte de la flèche en fonction de chaque cas.

Une meilleure approche de ce que vous essayez d'accomplir, c'est d'abord à l'aide d'un .filter et puis un .map, comme ceci:
```
this.props.comments
  .filter(commentReply => commentReply.replyTo === comment.id)
  .map((commentReply, idx) => <CommentItem key={idx} className="SubComment"/>);
```
- Que faire si aucune correspondance trouvée pour filtre
- Si aucun commentaire n'correspond au filtre, un tableau vide sera retournée. Qui sera transmise à .map, qui à son tour va être un no-op. En d'autres termes - si il n'y a pas de match, rien ne sera rendu.
InformationsquelleAutor Kris Selbekk
51

Un map() crée un tableau, un return est prévu pour tous les chemins de code (si/elses).

Si vous ne voulez pas d'un tableau ou de renvoyer des données, l'utilisation forEach à la place.
- C'est une courte et de la solution générale. Espérons que cela va à la première place
InformationsquelleAutor Zanon

Le problème semble être que vous n'êtes pas retourner quelque chose dans le cas où votre premier ifcas est faux.

L'erreur que vous obtenez des états que les flèches de votre fonction (comment) => { n'ont pas d'instruction return. Alors qu'il ne l'est pour quand votre if-cas est vrai, il ne retourne rien quand c'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 oeil à Kris' a la réponse à comment mieux mettre en œuvre ce que vous essayez de faire.

InformationsquelleAutor Chris

1

Les plus upvoted réponse, de Kris Selbekk, il est totalement à droite. Il est important de souligner cependant qu'il faut une approche fonctionnelle, vous serez en boucle par le this.props.comments tableau à deux reprises, la seconde fois(en boucle), il sera plus probable sauter quelques éléments où filtré, mais dans le cas où aucune comment a été filtré, vous aurez la boucle à travers l'ensemble du tableau à deux reprises. Si la performance n'est pas une préoccupation dans votre projet qui est tout à fait bien. Dans le cas où la performance est importante un guard clause serait plus approprié comme vous le feriez en boucle 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 principale raison pour laquelle je suis pointant c'est parce qu'en tant que Développeur Junior j'ai fait beaucoup de ces erreurs(comme en boucle le même tableau plusieurs fois), j'ai donc pensé que je valait la peine de le mentionner ici.

PS: je refactoriser vos réagir composante encore plus, comme je ne suis pas en faveur de la lourd dans la logique html part d'un JSX, mais qui est hors du sujet de cette question.

InformationsquelleAutor Anderson Saunders

JS:

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

Pourriez-vous ajouter quelques explications comment votre code résoudre OP problème?

InformationsquelleAutor Srinivasan N

Vous devez vous connecter pour publier un commentaire.