Как объединить два массива объектов с реагировать?

Question

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

Мой код:

componentDidMount() {
    fetch("url")
    .then(Response => Response.json())
      .then(data => {
        let evts = data;
        for (let i = 0; i < evts.length; i++) {
          evts[i].start = moment(evts[i].start).toDate();
          evts[i].end = moment(evts[i].end).toDate();
          this.state.evt1.push(evts[i])
        }                   
        this.setState({
          evt1: evts,
          prevEvents : evts
        })
      }) 
      console.log(this.state.evt1)
      const cachedHits = JSON.parse(localStorage.getItem('Evènements')) 
      console.log(cachedHits)
      for (let j = 0; j <cachedHits.length; j++) {
        cachedHits[j].start = moment(cachedHits[j].start).toDate();
        cachedHits[j].end = moment(cachedHits[j].end).toDate();
        this.state.evt2.push(cachedHits[j])
      }
    this.setState( {
      evt2: this.state.evt2
  })
    this.setState({
      events: [...this.state.evt1, ...this.state.evt2]
    })
  console.log(this.state.events)
  }

events - это объединенный массив evt1 (события из бэкэнда) и evt2 (события из локального хранилища), когда я запускаю его, я получаю на своей консоли:

evt1:

evt2:

Но в моем календаре отображаются только evt2, а не все события (evt1 и evt2).

Как можно отобразить все события в моем календаре?

Answer 1

Вы можете использовать оператор распространения для объединения двух массивов.

var a = [{fname : 'foo'}]
var b = [{lname : 'bar'}]
var c = [...a, ...b] // output is [{fname : 'foo'},{lname : 'bar'}]

Answer 2

Добавьте state.evt1 в evts, затем переберите данные, которые вы получаете из fetch, внесите изменения в текущий элемент внутри цикла, добавьте элемент в evts, а затем добавьте evts в состояние

        let evts = this.state.evt1;
        for (let i = 0; i < data.length; i++) {
          data[i].start = moment(data[i].start).toDate();
          data[i].end = moment(data[i].end).toDate();
          evts.push(data[i])
        }                   
        this.setState({
          evt1: evts
        })

Answer 3

Поскольку вы делаете HTTP-вызов на свой сервер, для извлечения данных требуется некоторое время.Вместо того, чтобы устанавливать состояние событий напрямую, вам следует дождаться ответа на ваш HTTP-вызов.Ваш код должен выглядеть следующим образом:

componentDidMount() {
    fetch("url")
        .then(Response => Response.json())
        .then(data => {
            let evts = data;
            for (let i = 0; i < evts.length; i++) {
                evts[i].start = moment(evts[i].start).toDate();
                evts[i].end = moment(evts[i].end).toDate();
                this.state.evt1.push(evts[i])
            }
            this.setState({
                evt1: evts,
                prevEvents: evts
            })
        })
        .then(() => {

            console.log(this.state.evt1)
            const cachedHits = JSON.parse(localStorage.getItem('Evènements'))
            console.log(cachedHits)
            for (let j = 0; j < cachedHits.length; j++) {
                cachedHits[j].start = moment(cachedHits[j].start).toDate();
                cachedHits[j].end = moment(cachedHits[j].end).toDate();
                this.state.evt2.push(cachedHits[j])
            }
            this.setState({
                evt2: this.state.evt2
            })
            this.setState({
                events: [...this.state.evt1, ...this.state.evt2]
            })
            console.log(this.state.events)

        });
}

Я также рекомендую иметь блок catch в цепочке обещаний для обработки ошибок.

Answer 4

Попробуйте использовать метод concat, может быть, он работает.

this.setState({
      events: evt1.concat(evt2)
    })