В чём проблема обращения к конкретному элементу массива?

Question

[One_null]

В общем проблема в следующем, есть база данных на firebase, есть компонент React. Я получаю данные из базы данных и формирую из них массив объектов вида:
,
после этого я пытаюсь передавать в состояние компонента данные из этого массива, но данных в массиве нет.

class CalendarDay extends Component{
    constructor(props){
        // console.log(db);
        super(props);
        this.state = {
            production: db.map( x => (x.data === this.props.date && localStorage.user === x.user_id) ? x.production : 0),
        }
    }

Моя идея проста, если совпадает дата и пользователь текущий и из базы данных, вывести значение в состояние. Однако, если выполнить console.log(db) - массив будет выведен, в нём будут значения, но если выводить например первый объект массива console.log(db[0]) - будет undefined. Если я правильно понимаю, то в момент отрисовки компонента массив ещё не заполнен, как это можно пофиксить?

Comments

[One_null]

Скриншот массива сделан в консоли браузера, после формирования массива данных я записывал его в window.a, и в консоли обращение к массиву работает корректно, a[0] вернёт первый объект из массива.
А вот какое состояние получается в результате выполнения кода выше:

Ещё не понимаю почему у меня в каждом из 30 компонентов, которые олицетворяют собой дни месяца, состояние становится array[] empty array, хотя записи есть только для пяти дней из 30, для остальных 25 по условию ведь должно было 0 вернуть

Answer 1

[Антон Спирин]

Можно использовать метод жизненного цикла componentDidMount:

class CalendarDay extends Component {
  state = { data: [] };

  comonentDidMount() {
    // тут делаем запрос к БД и передаем данные в состояние
  }
  // ...
}

Консоль отображает массив по состоянию на текущий момент. Во время вызова конструктора данных там еще нет. Чтобы в этом убедиться достаточно изменить вызов на:
console.log(JSON.stringify(db));

Comments

[One_null]

Я может что-то не так понял, но

function load(callback) {
    usersRef.on('child_added', snap => {
    let object = {
        data: snap.val().data,
        user_id: snap.val().user_id,
        production: snap.val().production,
    }
    db.push(object);
    });
    callback();
  }
<code lang="javascript">
    componentDidMount(){
          load(() => {
            this.setState({production: db[0].data});
          });
    }
</code>

Вот что у меня получилось, но обращение к массиву по прежнему возвращает undefined, а вызов
console.log(JSON.stringify(db)); внутри колбэка всё ещё возвращает пустой массив.

[Антон Спирин]

One_null, я бы рекомендовал вам пока отложить React и хорошо изучить JavaScript. Вы же вызываете колбек до прихода данных. И никаких глобальных переменных в вашем коде быть не должно, данные надо передавать напрямую в колбек. Да и массив вам судя по примеру не нужен. Вообще тут будет гораздо удобней использовать Promise:

function fetchData() {
  return new Promise(resolve => {
    usersRef.on('child_added', snap => {
      const { data, user_id, production } = snap.val();

      resolve({
        data,
        user_id,
        production,
      });
    });
  });  
}

componentDidMount(){
  fetchData().then(data => {
    this.setState({ data });
  });
}

Изучайте основы JavaScript. Без них не стоит браться за написание web приложений, так как ничего хорошего вы без знания основ не напишите.

Answer 2

[kova1ev]

Как я понял, получение данных из базы идет асинхронно. Я бы сделал так:
в конструкторе
this.state = {prodaction: []}

добавил бы componentDidMount() где вызывал функцию получения данных из базы, передавая ей в качестве коллбэка this.setState

то есть, компонент монтируется, вызывается загрузка данных, когда данные загружены вызывается setState, компонент перерисовывается. Пока данные не получены, можно крутить какой-нить прелоадер.

Comments

[One_null]

Я может что-то не так понял, но

function load(callback) {
    usersRef.on('child_added', snap => {
    let object = {
        data: snap.val().data,
        user_id: snap.val().user_id,
        production: snap.val().production,
    }
    db.push(object);
    });
    callback();
  }
<code lang="javascript">
    componentDidMount(){
          load(() => {
            this.setState({production: db[0].data});
          });
    }
</code>

Вот что у меня получилось, но обращение к массиву по прежнему возвращает undefined, а вызов
console.log(JSON.stringify(db)); внутри колбэка всё ещё возвращает пустой массив.

[kova1ev]

One_null, в функции load нужно передавать в callback полученые данные:

function load(callback) {
    usersRef.on('child_added', snap => {
    let object = {
        data: snap.val().data,
        user_id: snap.val().user_id,
        production: snap.val().production,
    }
    db.push(object);
    });
    callback(db);
}
=====================================
    componentDidMount(){
          load((db) => {
            this.setState({production: db[0].data});
          });
    }

[One_null]

kova1ev, не помогло, по прежнему undefined

[kova1ev]

One_null, я не знаю как устроено получение данных из firebase, не пользовался, но суть такова, что вам нужно вызвать колбэк после получения данных из базы и передать эти данные в него, а колбэк в свою очередь выполнит setState

[One_null]

kova1ev, спасибо, буду пробовать

[kova1ev]

One_null, могу привести пример с получением данных с какого нибудь апи

function load_data(url, callback) {
  fetch(url)
    .then(response => response.json())
    .then(data => callback(data));
}

componentDidMount() {
   load_data('http://......', (data) => this.setState({data: data})
}