web-dev-qa-db-de.com

Erwartet, dass am Ende der Pfeilfunktion ein Wert zurückgegeben wird

Alles funktioniert gut, aber ich habe diese Warnung Expected to return a value at the end of arrow function array-callback-return, ich versuche, forEach statt map zu verwenden, aber dann zeigt <CommentItem /> nicht einmal. Wie kann man das beheben?

  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

Die Warnung zeigt an, dass Sie am Ende Ihrer Kartenpfeilfunktion nicht in jedem Fall etwas zurückgeben.

Ein besserer Ansatz für das, was Sie zu erreichen versuchen, ist zuerst einen .filter und dann einen .map wie folgt:

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

Da map() ein Array erstellt, wird für alle Codepfade (if/elses) eine return erwartet.

Wenn Sie kein Array oder Daten zurückgeben möchten, verwenden Sie stattdessen forEach.

33
Zanon

Das Problem scheint zu sein, dass Sie nichts zurückgeben, falls Ihre erste if- False falsch ist.

Der Fehler, den Sie erhalten, besagt, dass Ihre Pfeilfunktion (comment) => { keine Rückgabeanweisung enthält. Während dies für den Fall gilt, dass Ihre if- wahr ist, gibt es nichts zurück, wenn es falsch ist.

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 Sie sollten einen Blick auf Kris 'Antwort werfen, wie Sie das, was Sie versuchen, besser umsetzen können.

4
Chris

Der einfachste Weg nur Wenn Sie etwas nicht zurückgeben müssen, ist es nur return null

0
CrsCaballero

Die beste Antwort von Kris Selbekk ist völlig richtig. Es ist jedoch wichtig hervorzuheben, dass ein funktionaler Ansatz erforderlich ist. Sie durchlaufen zweimal das this.props.comments-Array. Beim zweiten Mal (Looping) werden höchstwahrscheinlich einige Elemente übersprungen, die gefiltert wurden. Falls jedoch keine comment-Datei gefiltert wurde, werden Sie dies tun Schleife zweimal durch das gesamte Array. Wenn Leistung in Ihrem Projekt kein Anliegen ist, ist das vollkommen in Ordnung. Falls Leistung wichtig ist, wäre ein guard clause besser geeignet, als würden Sie das Array nur einmal schleifen:

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

Der Hauptgrund, warum ich darauf hinweise, ist, dass ich als Junior-Entwickler viele dieser Fehler gemacht habe (zum Beispiel dasselbe Array mehrmals durchläuft). Ich dachte, ich wäre es wert, es hier erwähnt zu haben.

PS: Ich würde Ihre Reakt-Komponente noch mehr umgestalten, da ich mich nicht für eine starke Logik im html part einer JSX aussprechen würde, aber das ist nicht das Thema dieser Frage.

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