错误：“类型“{}”缺少类型中的以下属性

Question

我正在制作一个待办事项列表，但出现此错误 “Type '{ id: number; text: string; }' is missing the following properties from type '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} />
})}