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
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"/>);
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
.
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.
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.
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')
);