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

Question

我有一个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)
  }

这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

由于您正在对服务器进行 HTTP 调用，因此需要一些时间来获取数据。您应该等待 HTTP 调用的响应，而不是直接设置事件状态。你的代码应该是这样的：

\n\n

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

\n\n

我还建议您在 Promise 链中添加一个 catch 块来处理错误。

\n