Реагируйте с функцией передачи машинописи в качестве реквизита, используя хуки

Question

Я довольно новичок в машинописи. пытаясь создать простое приложение crud с реагированием, машинописью и хуками. Я не могу понять, как передавать данные и функционировать вместе в качестве реквизита для дочернего компонента, который в дальнейшем будет отправлять реквизиты его ребенку. Вот пример кода.

родительский компонент

const App = () => {
  const [data, setData] = useState([
    { id: 1, name: 'John', email: 'john@gmail.com' },
    { id: 1, name: 'Mike', email: 'mike@gmail.com' },
  ])

 // how to send this function to StudentList component
  const removeStudent = (id: number): void => {
    setData(data.filter(item => item.id !== id))
  }

  return (
    <div>
      <StudentList data={data} removeStudent={removeStudent} />
    </div>
  );
}

дочерний компонент / StudentList

interface StudentsInterface {
    id: number,
    name: string,
    email: string,
}

interface PropsFunction {
    removeStudent: () => void
}

const StudentList = ({ data }: { data: StudentsInterface[] }, { removeStudent }: PropsFunction) => {
    console.log('removeStudent ==>', removeStudent) // getting undefined
    return (
        <table id='students'>
            <tbody>
                {data.map((student, index) => {
                    return (
                        <Student student={student} key={index} removeStudent={removeStudent} />
                    )
                })}
            </tbody>
        </table>
    )
}

Если я просто передам данные (первый параметр StudentList), я получу реквизиты, но я тоже хочу функцию removeStudent ...

Если это просто реакция, я знаю, что просто деструктурирую {removeStudent} в studentList, и все готово, но здесь в машинописи мне нужно определить тип данных. ..

Надеюсь, мне ясно. Поскольку я довольно новичок в машинописи, я был бы рад, если бы вы объяснили, что я делаю неправильно.

Answer 1

Вы используете 2 аргумента в качестве реквизита:

const StudentList = ({ data, removeStudent }: { data: StudentsInterface[], removeStudent: PropsFunction }) => ...

РЕДАКТИРОВАТЬ:

Один из способов исправить это, что вы определили PropsFunction в качестве интерфейса, то есть это объект со свойством removeStudent - вы, вероятно, просто хотите, чтобы оно было:

type PropsFunction = () => void;