Метод React Class возвращает undef вместо проверенного значения

Этот вопрос может показаться основным, но я застрял на этом. У меня есть класс, который не является компонентом, я использовал его для инициализации БД и выполнения операций БД CRUD. В классе есть метод readMatrix, который читает словарь из БД и возвращает его в виде матрицы. Я могу проверить значение матрицы в консоли, и оно правильное. Однако значение, возвращаемое вызывающей функции, является «неопределенным» вместо того, что я вижу в журнале консоли. Я попытался исправить это с помощью Redux/Hooks и нашел это слишком сложным для новичка вроде меня (я использую функции/хуки как компоненты, но класс для управления БД).

Вот код класса:

readMatrix (r,c,id) {
    const row = new Array(c).fill(null);
    var tempMatrix=[];
        for (let i=0; i<r; i++){
        tempMatrix.push([...row])
    }

    var restaurantRef = app.database().ref("/restaurants");
    restaurantRef.orderByKey().equalTo("1").on("child_added", function(snapshot){           
        //  console.info(snapshot.child("/layout").val());
        var restaurant=snapshot.child("/layout").val();
        for (const [key, value] of Object.entries(restaurant)) {
              let i=key;
              for (const [rowkey, rowvalue] of Object.entries(value)){
                  let j=rowkey;
                  tempMatrix[i][j]=rowvalue;                      
              }
        }
            console.info(tempMatrix);
    return(tempMatrix); 
        
}); 

}

И вот вызывающая функция:

    useEffect(()=>{
            
    setMatrix(FirebaseClass.readMatrix(matrixHeight,matrixWidth, 1))
    console.info(matrix);    
    
  }, []);

Есть идеи, что там не так?

Код внутри readMatrix кажется асинхронным. return tempMatrix будет выполнен до того, как к tempMatrix будут добавлены какие-либо значения. Вместо этого вы должны вернуть обещание. Возможно Почему моя переменная остается неизменной после того, как я изменяю ее внутри функции? - Справочник по асинхронному коду помогает.

Felix Kling 17.12.2020 17:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
72
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Спасибо за ответ(ы)

Вот единственная мысль, которая это исправила.

  1. Объявите readMatrix как асинхронный.
  2. Получите значение в матрице следующим образом:
FirebaseClass.readMatrix(matrixHeight,matrixWidth, 1).then(setMatrix)

Надеюсь, ответ понятнее, чем вопрос.

Другие вопросы по теме