时间戳

首页 > 解决方案 > 在打字稿反应中获取对象可能是“未定义的”

reactjs - 在打字稿反应中获取对象可能是“未定义的”

问题描述

我正在练习打字稿，反应并从API几天前创建的数据中获取一些数据，API 工作正常，在获取数据时正在为我的前端获取数据，但是当我尝试在该数据数组上使用 forEach 或 map 方法时给我一个错误： Object is possibly 'undefined'

interface Posts {
  _id: string
  title: string
  date: string
  text: string
  author_name: string
  published: boolean
  __v: number
}

const TextField = () => {
  const [posts, setPosts] = useState<Posts>()

  const fetchData = async () => {
    const result = await fetch("https://ed-blog-api.herokuapp.com/api/posts")
    const data = await result.json()
    const posts = data.posts
    setPosts(posts)
  }

  return (
    <div>
      <button onClick={fetchData}>Click</button>
      {posts.forEach((post: object) => {  // getting error here for posts
        console.log(post)
      })}
    </div>
  )
}

标签： reactjstypescripttsx

解决方案

我认为你的Posts界面实际上是一个单一的界面Post

所以：

interface Post {
  _id: string
  title: string
  date: string
  text: string
  author_name: string
  published: boolean
  __v: number
}

type Posts=Post[]

现在在这里，您不再需要键入postas object。Typescript 会自行推断。

    const TextField = () => {
  const [posts, setPosts] = useState<Posts|[]>([])

  const fetchData = async () => {
    const result = await fetch("https://ed-blog-api.herokuapp.com/api/posts")
    const data = await result.json()
    const posts = data.posts
    setPosts(posts)
  }

  return (
    <div>
      <button onClick={fetchData}>Click</button>
      {posts.forEach((post) => {  
        console.log(post)
      })}
    </div>
  )
}

但实际上该错误的原因是在 JavaScript 中的类型null也是对象！因此，如果您键入任何内容object，则表示它可能是数组、对象或 null。如果它为空，则不能使用它的任何属性。

推荐阅读