javascript - property - title label html

Se espera que devuelva un valor al final de la función de flecha

Question

Todo funciona bien, pero tengo esta advertencia. Expected to return a value at the end of arrow function array-callback-return , trato de usar forEach lugar de map , pero luego <CommentItem /> ni siquiera se muestra. ¿Cómo arreglarlo?

  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

Answer 1

El problema parece ser que no está devolviendo algo en caso de que su primer if es falso.

El error que está recibiendo indica que su función de flecha (comment) => { no tiene una declaración de retorno. Si bien lo hace para cuando su if es verdadero, no devuelve nada para cuando es falso.

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

Edita : deberías echar un vistazo a la respuesta de Kris sobre cómo implementar mejor lo que estás tratando de hacer.

Answer 2

La advertencia indica que no está devolviendo algo al final de su función de flecha de mapa en todos los casos.

Un mejor enfoque de lo que estás tratando de lograr es primero usar un .filter y luego un .map , como este:

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

Answer 3

La respuesta más votada, de Kris Selbekk, es totalmente correcta. Sin embargo, es importante resaltar que adopta un enfoque funcional, pasará dos veces por el arreglo this.props.comments , la segunda vez (en bucle) probablemente salteará algunos elementos que se filtraron, pero en caso de no hacer comment Se filtró y recorrerás toda la matriz dos veces. Si el rendimiento no es una preocupación en su proyecto, eso está totalmente bien. En caso de que el rendimiento sea importante, una guard clause sería más apropiada, ya que solo haría un bucle de la matriz una vez:

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 razón principal por la que lo señalo es porque, como Desarrollador Junior, cometí muchos de esos errores (como repetir el mismo arreglo varias veces), así que pensé que valía la pena mencionarlo aquí.

PD: Refactorizaría aún más su componente de reacción, ya que no estoy a favor de una lógica pesada en la html part de un JSX , pero eso está fuera del tema de esta pregunta.

Answer 4

Un map() crea una matriz, por lo que se espera un return para todas las rutas de código (si / elses).

Si no desea una matriz o para devolver datos, use forEach en forEach lugar.