Ожидается возвращение значения в конце функции стрелки

Все работает нормально, но у меня есть это предупреждение Expected to return a value at the end of arrow function array-callback-return, я пытаюсь использовать forEach вместо map, но тогда <CommentItem /> даже не отображается. Как это исправить?

  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

Ответ 1

Предупреждение указывает, что вы не возвращаете что-то в конце своей функции со стрелкой в каждом случае.

Лучший подход к тому, что вы пытаетесь выполнить, - сначала использовать .filter, а затем .map, например:

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

Ответ 2

A map() создает массив, поэтому ожидается return для всех путей кода (если/elses).

Если вы не хотите массив или возвращаете данные, используйте forEach вместо этого.

Ответ 3

Проблема заключается в том, что вы не возвращаете что-то в том случае, если ваш первый if -case имеет значение false.

Ошибка, которую вы получаете, указывает, что ваша функция стрелок (comment) => { не имеет оператора возврата. Пока это происходит, когда ваш if -case имеет значение true, он ничего не возвращает, когда он ложный.

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

изменить, вы должны взглянуть на ответ Криса о том, как лучше реализовать то, что вы пытаетесь сделать.

Ответ 4

Самый решительный ответ от Криса Сельбека, это совершенно верно. Важно подчеркнуть, что хотя он и использует функциональный подход, вы дважды будете проходить по массиву this.props.comments, а во второй раз (циклически) наиболее вероятно пропустить несколько элементов, которые были отфильтрованы, но в случае отсутствия comment был отфильтрован, вы пройдете через весь массив дважды. Если производительность не является проблемой в вашем проекте, это совершенно нормально. Если важна производительность, то guard clause будет более подходящим, поскольку вы зациклите массив только один раз:

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

Основная причина, по которой я обращаю на это внимание, заключается в том, что я, будучи младшим разработчиком, сделал много таких ошибок (например, многократное зацикливание одного и того же массива), поэтому я подумал, что стоит упомянуть об этом здесь.

PS: Я бы еще больше переработал ваш компонент реагирования, поскольку я не поддерживаю тяжелую логику в html part JSX, но это не входит в тему этого вопроса.

Ответ 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')
);

Ответ 6

Самый простой способ только, если вам не нужно возвращать что-то, это просто return null