Flatlist не отображает данные из firebase

Я пытаюсь отобразить один элемент в Flatlist, но он ничего не отображает. Даже элементы вне Flatlist не отображаются. Я обычно не использую компоненты класса, так что, может быть, я что-то пропустил?

static navigationOption = ({ navigation }) => {
        return {
          scannedkey: navigation.getParam("itemId", null)
        }
      }
     
   
    constructor(props){
        super(props);
        this.state = { 
        productlist:[],

        
        } }
        
    async componentDidMount(scannedkey){
        
        firebase.database().ref(`product/${scannedkey}`).on(
          "value",
          (snapshot) => {
            var list = [];
            snapshot.forEach((child) => {
              list.push({
                key: child.key,
                title: child.title,
                //details: child.val().details,
                //price: child.val().price
              });
            });
        
            this.setState({ productlist: list });
          },
          (error) => console.error(error)
        );
    }
  componentWillUnmount() {
      if (this.valuelistener_) {
        this.valueRef_.off("value", this.valuelistener_)
      }}
    
  render() {
    console.info(this.state.productlist)
 return(
     <View style = {styles.container}>
       <Text>Hey</Text>
      <Text>{this.state.productlist.title}</Text>
     </View>
 );}}

Вот какая ошибка я получаю:

Setting a timer for a long period of time, i.e. multiple minutes, is a performance and correctness issue on Android as it keeps the timer module awake, and timers can only be called when the app is in the foreground. See https://github.com/facebook/react-native/issues/12981 for more info.
(Saw setTimeout with duration 392608ms)
at node_modules\react-native\Libraries\LogBox\LogBox.js:117:10 in registerWarning
at node_modules\react-native\Libraries\LogBox\LogBox.js:63:8 in warnImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:36:4 in console.warn
at node_modules\expo\build\environment\react-native-logs.fx.js:18:4 in warn
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:226:6 in setTimeout
at node_modules\@firebase\database\dist\index.esm.js:99:8 in MemoryStorage

Буду признателен, если вы поможете найти решение, как это исправить.

Опечатка. Вы устанавливаете produclist вместо productlist

— 30.03.2021 03:53

@jnpdx исправил опечатку, все еще не работающую. Я также добавил то, что получал из журнала консоли.

— 30.03.2021 14:32

firebase react-native firebase-realtime-database react-native-flatlist react-native-firebase

30.03.2021 02:56

Интеграция Angular - Firebase Analytics

Узнайте, как настроить Firebase Analytics и отслеживать поведение пользователей в вашем приложении Angular.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

В вашем обработчике on('value') есть опечатка:

this.setState({ produclist: list });

должно быть

this.setState({ productlist: list });

Метод on(...) также принимает обратный вызов обработки ошибок, к которому вы должны присоединиться, чтобы получать информацию о любых ошибках базы данных:

.on(
  "value",
  (snapshot) => {
    var list = [];
    snapshot.forEach((child) => {
      const childData = child.val();
      list.push({
        key: child.key,
        title: childData.title,
        //details: childData.details,
        //price: childData.price
      });
    });

    this.setState({ productlist: list });
  },
  (error) => console.error(error)
);

Еще одна вещь, метод on(...) возвращает обратный вызов, который вы должны использовать в componentWillUnmount, чтобы ваш элемент был должным образом уничтожен:

componentDidMount(scannedkey) {
  this.valueRef_ = firebase
    .database()
    .ref(`product/${scannedkey}`);
  this.valuelistener_ = this.valueRef_
    .on("value", ...)
}

componentWillUnmount() {
  if (this.valuelistener_) {
    this.valueRef_.off("value", this.valuelistener_)
  }
}

Спасибо, что добавили то, что просили, но все еще не отображается, думаю, это я из Flatlist.

— 30.03.2021 13:53

@MayWheather вы еще не прикрепили обработчик ошибок к on('value') (как показано в этом ответе), это, скорее всего, покажет, в чем ваша проблема.

— 30.03.2021 14:42

Извините, я обновил код, а также отправил полученное сообщение.

— 30.03.2021 14:53

@MayWheather Опечатка productlist снова вернулась.

— 30.03.2021 15:06

Спасибо, что снова указали. Теперь он не отображает ошибку, но по-прежнему показывает мне, что массив пуст, и выдает предупреждающее сообщение.

— 30.03.2021 17:40

Я также проверил ключ, который показывает мне undefined. Так что, думаю, я постараюсь убедиться, что ключ проходит правильно.

— 30.03.2021 17:50