错误："类型'{}'缺少类型中的以下属性

Question

我正在制作一个待办事项列表，并收到此错误"类型‘｛id:number；text:string；｝’缺少类型‘Props’中的以下属性：item，handleDelete">。我不知道该怎么解决这个问题了。感谢

来自App.tsx

import React, { useState } from 'react'
import TodoComponent from './TodoComponent'
interface Todo {
id: number
text: string
}
function App() {
const [inputText, setInputText] = useState<string>('')
const [todoArray, setTodoArray] = useState<Array<Todo>>([{ id: 0, text: '' }])
const [count, setCount] = useState<number>(1)
const handleClick = () => {
if (inputText !== '') setCount(count + 1)
setTodoArray([...todoArray, { id: count, text: inputText }])
setInputText('')
}
const handleDelete = (id: number) => {
console.log('click', id)
}
return (
<div>
<input type="text" value={inputText} onChange={e => setInputText(e.target.value)} />
<button onClick={handleClick}>Add</button>
{todoArray.map(item => {
return <TodoComponent {...item} {...handleDelete}/>
})}
</div>
)
}
export default App

来自TodoComponent.tsx

import React from 'react'
interface Props {
item: {id: number, text: string}
handleDelete: (id: number) => void
}
function TodoComponent(todo: Props) {
return (
<div>
{todo.item.text}
{todo.item.text !== '' && <button onClick={() => todo.handleDelete(todo.item.id)}>x</button>}
</div>
)
}
export default TodoComponent

Answer 1

您必须通过以下方式传递道具：

{todoArray.map(item => {
return <TodoComponent item={item} handleDelete={handleDelete} />
})}