Ожидается возврат значения в конце функции arrow
все работает нормально, но у меня это предупреждение 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
3 ответов
предупреждение указывает, что вы не возвращаете что-то в конце функции стрелки карты в каждом случае.
лучший подход к тому, что ты пытаешься сделать это с помощью .filter
и .map
, например:
this.props.comments
.filter(commentReply => commentReply.replyTo === comment.id)
.map((commentReply, idx) => <CommentItem key={idx} className="SubComment"/>);
A map()
создает массив, поэтому return
ожидается для всех путей кода (if / elses).
Если вы не хотите массив или возвращать данные, используйте forEach
вместо.
проблема, кажется, в том, что вы не возвращаете что-то в том случае, если ваш первый if
- case имеет значение false.
ошибка, которую вы получаете, гласит, что ваша функция стрелки (comment) => {
не имеет оператора return. Хотя это когда ваш if
- case является true, он ничего не возвращает, когда он false.
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.
}
});
редактировать вы должны взглянуть на ответ Криса о том, как лучше реализовать то, что вы пытаетесь делать.