reactjs 如何在React Typescript应用程序中声明Map的属性名称

roqulrg3 于 2022-12-12 发布在 React

关注(0)|答案(2)|浏览(131)

我试图弄清楚为什么我的代码告诉我，具有“name”属性的Map数据的类型是never。我已经在接口中声明了commentsData，但显然那里发生了错误。
请看下面我的代码：

interface IProps {
  commentsData: [] 
}

const CommentList: React.FC<IProps> = ({ commentsData }: IProps) => {
  return (
    <div>
      {commentsData.map(comment => {
        return (
          <div>
            {comment.name}
          </div>
        )
      })}
    </div>
  )
}

export const getStaticProps = async ()=> {
  const data = await fetch('https://jsonplaceholder.typicode.com/comments')
    .then((res) => res.json())
    .then((data) => data);
    return {
      props: {
        commentsData: data
      }
    }
}

export default CommentList;

下面是Typescript抛出错误的图像：

这里有人看到过这个错误吗？你是怎么解决的。谢谢你的帮助！

reactjs

来源：https://stackoverflow.com/questions/74757436/how-to-declare-mapped-property-name-in-react-typescript-app

2条答案

按热度按时间

k2arahey1#

您需要指定数组的内容，例如：

interface IComment {
  postId: number;
  id: number;
  name: string;
  email: string;
  body: string;
}

interface IProps {
  commentsData: IComment[] 
}

通过这种方式，TypeScript知道数组中预期的对象类型。

赞(0）回复(0）举报 2022-12-12

34gzjxbg2#

你必须用一个索引器定义一个接口，因为它看起来像一个对象数组。
我分享的链接可以帮助你。How can i define an interface for array of an object

赞(0）回复(0）举报 2022-12-12