2017-07-10 37 views
9

Wszystko działa dobrze, ale mam to ostrzeżenie Expected to return a value at the end of arrow function array-callback-return, staram się używać forEach zamiast map, ale wtedy <CommentItem /> nawet się nie wyświetla. Jak to naprawić?Oczekuje się zwrócić wartość na końcu funkcji strzałki

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

+0

Czy jest inny zwrot, jeśli nie wejdziesz do tego, jeśli? – epascarello

+2

Powracasz tylko wtedy, gdy 'commentReply.replyTo === comment.id'. Jeśli tak nie jest, nic nie zwracasz. Po prostu wstaw 'return null' po' '' bloku –

+0

Mikael Lennholm, czy mogę powiedzieć, że jesteś geniuszem –

Odpowiedz

15

Ostrzeżenie wskazuje, że nie jesteś powrocie coś na końcu mapy funkcji strzałką w każdym przypadku.

Lepsze podejście do tego, co starasz się osiągnąć najpierw za pomocą .filter a następnie .map, tak:

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

Problem wydaje się, że nie wracają coś w przypadku, pierwsza twoja if jest fałszywa.

Otrzymany błąd stwierdza, że ​​funkcja strzałki (comment) => { nie zawiera instrukcji return. Chociaż ma to miejsce w przypadku, gdy twoja if -case jest prawdziwa, nie zwraca niczego, gdy jest fałszywa.

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 należy spojrzeć na odpowiedź Kris' dla jak lepiej realizować to, co staramy się robić.

1

A map() tworzy tablicę, więc return jest oczekiwana dla wszystkich ścieżek kodu (jeśli/elses).

Jeśli nie chcesz tablicy lub chcesz zwrócić dane, użyj zamiast tego forEach.

Powiązane problemy