Блог

Главная - Вопросы по программированию - Функция обратного вызова, переданная слишком много уровней, становится «не функцией».

Функция обратного вызова, переданная слишком много уровней, становится «не функцией».

#reactjs #typescript #callback

Вопрос:

У меня есть простая функция обратного вызова, которая передается от родителя на несколько уровней вниз к компоненту, который активирует ее при нажатии.

 const routeToChapter = (courseId: string, chapterId: string) => {
 // do something
}

<Sidebar
  routeToChapter={routeToChapter}
/>

А затем боковая панель передает его еще 3 дочерним элементам до такой степени, что он действительно может быть запущен в таком компоненте, как этот:

 export const ChapterTreeItem = ({
  routeToChapter,
}: Props) => {
  const onRouteToChapter = () => {
    routeToChapter(courseId, chapter.id as string)
  }


  return (
    <EditorTreeItem
      onDoubleClick={onRouteToChapter}
    /> ......

Проблема в том, что onRouteToChapter запускается, но «routeToChapter» выдает ошибку, в которой говорится, что «routeToChapter не является функцией».

Я экспериментировал с тестовым обратным вызовом, который я передал от непосредственного родителя нижнему ребенку, и это сработало. И я поднял его еще на 2 уровня, прежде чем он перестал работать, и я получил ту же ошибку. Я не уверен, почему это происходит.

Редактировать

Я утешаю.зарегистрируйте функцию «routeToChapter» на каждом уровне, и она будет напечатана как функция, в том числе в нижнем компоненте. Однако, если я напечатаю его в «onRouteToChapter» при вызове функции, он всегда возвращается как неопределенный. Странный

Комментарии:

1. Это должно сработать, у вас, вероятно, где-то еще есть опечатка. Можете ли вы попробовать создать кодовое перо или что-то подобное, воспроизводящее проблему?

2. Просто для подтверждения, вы явно передаете опору от каждого промежуточного ребенка вниз?

3. Да. И я дважды проверил, нет ли опечаток, их нет. Кроме того, я использую Typepscript, так что все набрано. В нижнем дочернем элементе Typescript также правильно регистрирует его как функцию.

Ответ №1:

Моя вина.

У меня был этот компонент, существующий в 2 разных местах, но я тестировал его только там, где у родителя не было функции «routeToChapter» в родителе, что означало, что он вызывал undefined.

Метки: , ,