javascript Reactjs中的类型字符串上不存在属性标题

zsohkypk 于 2023-01-29 发布在 Java

关注(0)|答案(1)|浏览(126)

我正在使用Reactjs和nextjs框架，现在我正在尝试获取数据，我正在获取数据，但我也得到了错误"Property 'title' does not exist on type 'string'"，我该如何解决这个问题？

import { useEffect, useState } from "react"
export default function Test() {
  const [data, setData] = useState('')
  useEffect(() => {
    const callData = async () => {
      const data = await fetch('https://jsonplaceholder.typicode.com/todos/10').then(data => data.json())
      console.log(data);
      setData(data)
    }
    callData()
  }, [])

  return (
    
    data === '' ? <>loading ... </> : <div>{data.title}</div>
    )

}

JavaScript

来源：https://stackoverflow.com/questions/75266975/property-title-does-not-exist-on-type-string-in-reactjs

1条答案

按热度按时间

fnvucqvd1#

您正在使用字符串：

const [data, setData] = useState('')

在上面寻找一个叫做title的属性：

<div>{data.title}</div>

字符串上确实没有这样的属性，这是TypeScript（不是JavaScript）告诉你的，而不是使用空字符串来指示缺少值，使用undefined：

const [data, setData] = useState();

并修改用法以检查“falsy”值：

return (
  data ? <div>{data.title}</div> : <>loading ... </>
);

既然你使用的是TypeScript，你可能也想开始为这些值指定类型。useState调用可以包括一个类型说明符，以及 AJAX 操作。否则你将依赖于隐式any类型，此时几乎没有理由使用TypeScript。
例如，即使使用上面的代码，您 * 可能 * 仍然需要指定一个类型：

const [data, setData] = useState<{title:string}>();

否则，它可能会在隐含类型never上查找属性title，这也不会起作用。我使用的上述类型是匿名的，基于我们在问题中所拥有的唯一信息（存在一个名为title的属性）。如果你有一个命名类型，比如一个定义的接口，那将是理想的。
您 * 可以 * 使用显式any类型：

const [data, setData] = useState<any>();

但是在这一点上，为什么要使用TypeScript呢？没有理由使用静态类型系统只是为了告诉它不要担心静态类型。

赞(0）回复(0）举报 2023-01-29

我来回答

javascript Reactjs中的类型字符串上不存在属性标题

1条答案

相关问题

热门标签

最新问答