从 React.js 转换为 React.tsx 属性 'id' 不存在于类型 'never' 上。 TS2339

Posted 2023-02-22

【中文标题】从 React.js 转换为 React.tsx 属性 \'id\' 不存在于类型 \'never\' 上。 TS2339

【英文标题】：Converting from React.js to React.tsx Property 'id' does not exist on type 'never'. TS2339从 React.js 转换为 React.tsx 属性 'id' 不存在于类型 'never' 上。 TS2339

【发布时间】：2020-12-23 16:52:35

【问题描述】：

我正在尝试按照教程来学习类型脚本中的反应。但是，当我构建我的解决方案时，我得到了错误。 代码

import React,  useState, useEffect  from 'react';
import axios from 'axios';


const DataFetching = () => 
  const [posts, setPosts] = useState([]);

  useEffect(() => 
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(res => 
        console.log(res)
        setPosts(res.data)
      )
      .catch(err => 
        console.log(err)
      )
  )
  return (
    <div>
      <ul>
        posts.map(post => (<li key=post.id>post.title</li>))
      </ul>
    </div>
  );
;

export default DataFetching;

我遇到的错误

TypeScript error in src/DataFetching.tsx(21,43):
Property 'id' does not exist on type 'never'.  TS2339

我正在关注以下教程 https://www.youtube.com/watch?v=bYFYF2GnMy8 。任何帮助或指导表示赞赏

【问题讨论】：

这能回答你的问题吗？ Set types on useState React Hook with TypeScript

【参考方案1】：

您应该始终指定状态变量的type。在本例中，您使用的是 Posts 数组。所以你必须创建一个 Post 接口并在 useState 中使用该类型。

import React,  useState, useEffect  from 'react';
import axios from 'axios';

interface Post 
  id: number;
  title: string;


const DataFetching = () => 
  const [posts, setPosts] = useState<Post[]>([]);

  useEffect(() => 
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(res => 
        console.log(res)
        setPosts(res.data)
      )
      .catch(err => 
        console.log(err)
      )
  )
  return (
    <div>
      <ul>
        posts.map(post => (<li key=post.id>post.title</li>))
      </ul>
    </div>
  );
;

export default DataFetching;

【参考方案2】：

您应该明确地将类型添加到useState。当您提供空数组打字稿时，推断其类型为never[]。

const [posts, setPosts] = useState<Post>([]);

【讨论】：

如果没有提供或者提供了空数组，你知道为什么它推断它的类型为never吗？

空数组是never[]，因为打字稿没有关于项目的信息，所以它假定它总是空数组。替代方案几乎只有any[] 或unknown[]，但它不安全，因此在严格的打字稿中被禁用。 github.com/microsoft/TypeScript/pull/8944