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

Question

我试图按照一个教程来学习react-in-type脚本。然而，当我构建我的解决方案时，我会发现错误。密码

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 . 任何帮助或指导都将不胜感激

Answer 1

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

const[posts，setPosts]=useState

Answer 2

您应该始终指定状态变量的类型。在这种情况下，您使用的是一个帖子数组。因此，您必须创建一个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;