По какой причине реакт не воспринимает массив?

Question

[laravel_creative_3103]

comments.map is not a function
С чем это может быть связано?

export interface ICommentResponse {
    id: number,
    comment: string,
    createdComment: any
}
export type CommentResponseType = ICommentResponse[];
const Comment = () => {

    const dispatch = useAppDispatch();

    const [comments,  setComments] = useState<CommentResponseType>([])
   
    return (
        <div>
            {comments.map((c: ICommentResponse) => (  //здесь возникает ошибка comments.map is not a function
                <>
                    <p>{c.id}</p>
                    <p>{c.comment}</p>
                    <p>{c.createdComment}</p>
                </>
            ))}
        </div>
    )
}

export default Comment

Comments

[WbICHA]

В приведённом коде ошибок нет.

Answer 1

[Михаил]

Точно так и не понял в чем у Вас заключается проблема, но лично у меня данный код работает. Попробуйте его написать таким образом:

import React from 'react'

export type CommentItem = {
  id: number
  comment: string
  createdComment: any
  // eslint ругается на тип "any"
  // лучше от него потом избавиться
}

export type CommentList = CommentItem[]

const Comment = () => {

  const [comments, setComments] = React.useState<CommentList>([])
 
  return (
    <div>
      {/* 
        для comment-объекта можно не устанавливать тип, поскольку 
        среда разработки поймёт что это объект массива с типом CommentList (то есть CommentItem)
      */}
      {comments.map((comment) => (
        <>
          <p>{comment.id}</p>
          <p>{comment.comment}</p>
          <p>{comment.createdComment}</p> 
        </>
      ))}
    </div>
  )

}

export default Comment

У Вас точно импортирован хук useState?

Comments

[WbICHA]

Причём здесь импорт? Евли юзСтейт неимпортирован, то комментс будут эни и тс такую ошибку в принципе не даст.

[Михаил]

WbICHA, ну так я и написал что не вижу проблем, но на всякий случай указал про импорт. Только что проверил - действительно any, да и к тому же там ошибку выдает что useState is not defined, так что думаю да, импорт уж точно тут не причем)