React typescript - 尝试分配 React 的 key prop 时出现类型错误

Question

我有简单的代码如下：

/类型.ts

export type TodoType = {
  id: String
  task: String
  completed: Boolean
}

/组件/Todo.tsx

import { TodoType } from '../types'

type TodoProps = {
  todoData: TodoType
}

const Todo = ({ todoData: { task } }: TodoProps) => {
  return <div>{task}</div>
}

export default Todo

/pages/index.tsx

import Todo from '../components/Todo'
import {TodoType} from '../types'

const Index = () => {
  const { data, isLoading } = useQuery('todos', todosQuery)

  if (isLoading) return <p>Loading ...</p>

  return (
    <div>
      {data.todos.map((todo: TodoType) => (
        <Todo key={todo.id} todoData={todo} />
      ))}
    </div>
  )
}
export default Index

我不断收到以下错误：

（属性）Attributes.key？：键 |空 |未定义

类型“String”不可分配给类型“Key |”空 |未定义'.ts(2322)

预期的类型来自属性“key”，它在类型“IntrinsicAttributes & TodoProps”上声明

知道如何解决这个问题吗？

Answer 1

代码中的错误在于类型声明中，而不是使用 String 而是使用全部小写的字符串，这应该可以工作。

大写S的字符串指的是对象类型，而不是原始类型。

将您的类型更改为：

export type TodoType = {
  id: string
  task: string
  completed: boolean
}