Блог

Главная - Вопросы по программированию - преобразованный класс в крючки, получающие «Ошибку диапазона без перехвата: максимальный размер стека вызовов превышен в getFloorplan»

преобразованный класс в крючки, получающие «Ошибку диапазона без перехвата: максимальный размер стека вызовов превышен в getFloorplan»

#javascript #reactjs #typescript #function #react-hooks

Вопрос:

Я пытаюсь учиться, кодируя здесь, я преобразовал классы в хуки, версия класса работает нормально, но преобразованная(хуки) версия выдает мне эту ошибку : «Ошибка в диапазоне: максимальный размер стека вызовов превышен в getFloorplan», буду признателен за любую помощь.

вот рабочий код:

  import {
        getGraph,
        getFloorplan,
        changeActiveCamera,
    } from "../redux/actions";

    const mapStateToProps = (state) => {
      return {
        currentSite: state.selection.currentSite,
        currentCamera: state.selection.currentCamera,

      
      };
    };

    function mapDispatchToProps(dispatch) {
      return {
        getGraph: (site) => dispatch(getGraph(site)),
        getFloorplan: (site) => dispatch(getFloorplan(site)),
           changeActiveCamera: (site, id) => dispatch(changeActiveCamera(site, id)),

      };
    }


    loadGraph() {
        if (this.props.currentSite) {
          this.props.getFloorplan(this.props.currentSite.identif).then(() => {
            console.log("Fetched floorplan");

            this.props.getGraph(this.props.currentSite.identif).then(() => {
              console.log("Fetched model", this.props.realGraph.model);

              // new camera-related node amp; link status
              if (this.props.currentCamera) {
                this.props.changeActiveCamera(
                  this.props.currentSite.identif,
                  this.props.currentCamera.identif
                );
              }
            });
          });
        }
      }

Это версия hooks, которую я преобразовал из приведенного выше кода, здесь я получаю эту ошибку:

    const currentSite = useSelector((state) =>      state.selection.currentSite);
       const currentCamera = useSelector((state) => state.selection.currentCamera);
       const getFloorplan = (site) => dispatch(getFloorplan(site));
       const getGraph = (site) => dispatch(getGraph(site));
       const changeActiveCamera = (site, id) =>
        dispatch(changeActiveCamera(site, id));
      
      const loadGraph = () => {
        if (currentSite) {
          getFloorplan(currentSite.identif).then(() => {
            console.log("Fetched floorplan");

            getGraph(currentSite.identif).then(() => {
              console.log("Fetched model", realGraph.model);

              // new camera-related node amp; link status
              if (currentCamera) {
                changeActiveCamera(
                  currentSite.identif,
                  currentCamera.identif
                );
              }
            });
          });
        }
      };

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

1. const getFloorplan = (сайт) => отправка(getFloorplan(сайт)); разве это не рекурсивный вызов без точки выхода?

2. @Singh как именно я должен преобразовать этот класс в хуки ? как бы ты поступил ? я что-то упускаю

3. @Сингх в этом видео сделал точно такое же видео без ошибок: egghead.io/lessons/…

4. что я вижу, так это то, что он вызывает другую функцию в dispatch(ratesUpdated); а не updatedRates.

Ответ №1:

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

        const currentSite = useSelector((state) =>      state.selection.currentSite);
       const currentCamera = useSelector((state) => state.selection.currentCamera);
       const dispatchGetFloorplan = (site) => dispatch(getFloorplan(site));
       const dispatchGetGraph = (site) => dispatch(getGraph(site));
       const dispatchChangeActiveCamera = (site, id) =>
        dispatch(changeActiveCamera(site, id));
      
      const loadGraph = () => {
        if (currentSite) {
          dispatchGetFloorplan(currentSite.identif).then(() => {
            console.log("Fetched floorplan");

            dispatchGetGraph(currentSite.identif).then(() => {
              console.log("Fetched model", realGraph.model);

              // new camera-related node amp; link status
              if (currentCamera) {
                dispatchChangeActiveCamera(
                  currentSite.identif,
                  currentCamera.identif
                );
              }
            });
          });
        }
      };

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

1. @joonas На мой вкус, в последнем фрагменте я бы вообще не объявлял const и вместо этого просто использовал функцию отправки внутри вашей функции loadGraph, если это возможно.

2. да, вы правы, но это не сработало !! я попробовал это и получил» Свойство», затем «не существует типа» (отправка: любая) => Обещание». ts(2339)», не могли бы вы добавить два ответа, один из которых вы уже добавили, а другой, который вы только что предложили ?

3. я нашел здесь одну проблему с версией класса, которая работает в консоли»console.log («Выбранная модель», this.props.realGraph.model); «я получаю» Выбранный объект модели», но в вашей версии я получаю «Выбранная модель не определена», по какой-либо причине ?

4. и теперь также получаем «Свойство», тогда «не существует типа» (отправка: любая) => Обещание><недействительно>».ts(2339) »

5. Я нигде не вижу в вашем коде определенной переменной realGraph, поэтому я не могу вам в этом помочь. Ваш первоначальный вопрос касался проблемы стекового потока, связанной с бесконечным циклом. Также из вашего кода я не совсем уверен, нужно ли ждать разрешения обещания от одного действия redux, чтобы отправить другое. Это вообще асинхронные вызовы?

Метки: ,