如何使用reactjs合并两个对象数组?

时间:2019-04-10 07:53:13

标签: javascript arrays reactjs local-storage react-big-calendar

我有一个react-big-calendar,我想从后端获取本周的事件,而从本地存储中获取其他几周的事件。

我的代码是:

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)
  }

eventsevt1(来自后端的事件)和evt2(来自本地存储的事件)的合并数组,当我运行它时,我进入控制台: / p>

evt1是:

enter image description here

evt2是:

enter image description here

但是,在我的日历上,仅显示evt2,而不显示所有事件(evt1和evt2)。

如何在我的日历上显示所有事件?

4 个答案:

答案 0 :(得分:2)

您可以使用传播运算符合并两个数组。

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

答案 1 :(得分:1)

尝试使用$app->view or $app['view']. 方法可能有效。

concat

答案 2 :(得分:1)

由于您要对服务器进行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)

        });
}

我还建议您在Promise链中使用catch块来处理错误。

答案 3 :(得分:1)

在evts上添加state.evt1,然后遍历从获取中获取的数据,对for循环内的当前元素进行更改,将元素推送到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
        })