如何使用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)。

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

- Ichrak Mansour

Answer 1

你可以使用扩展运算符来合并两个数组。

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

- Vikas Singh

---

有一段时间感到沮丧，但是你的回答让我很开心！仍然对设置状态的最佳实践感到困惑，是数组对象还是对象嵌套对象呢？ :( - Vrangle

在 var b 上，如果我只是添加了这个 var b = [{fname : 'other'}]，请注意我使用了相同的键。现在，它只是再次与相同的键合并。因此，输出就像这样：// [{fname : 'foo'},{fname : 'other'}]。不确定如何仅更新值。 - Niamul

Answer 2

由于您正在向服务器发出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块来处理错误。

- Burak Gavas

Answer 3

也许尝试使用concat方法会有帮助。

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

- lwolf

---

它仍然是同一个问题，只是显示了“evt2”。 - Ichrak Mansour

@burak-gavas 可能是正确的选择。 - lwolf

Answer 4

在 evts 上添加 state.evt1，然后通过从 fetch 获取的数据进行迭代，在 for 循环内对当前元素进行更改，将元素推入 evts，然后将该 evts 添加到 state。

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

- TimeFrame