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

Question

我正在努力学习如何在类型脚本中进行反应。然而，当我构建解决方案时，我会出错。代码

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

您应该始终指定状态变量的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;

Answer 2

您应该显式地向useState添加类型。当您提供空数组typescript时，可以推断它的类型为never[]。

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