在 React 中拼接一个数组不断重新渲染

Question

在 update(changeProps) 函数中，我有这样的东西：

 update(changedProps) {
      if (this.person) {
        this.__arr = ['hi', 'hi', 'hi'];
      } else {
        this.__arr = ['bye', 'bye', 'bye', 'bye'];
      }

    if (this.__hello) {
      this.__arr.splice(1, 0, 'hello');
    }

    super.update(changedProps);
  }

说 this.person 是真的，当我点击其他地方并且页面重新呈现时，它变成

this.__arr = ['hi', 'hello', 'hi', 'hi']

然后当它再次重新渲染时：this.__arr = ['hi', 'hello','hello', 'hi', 'hi']

它在每次重新渲染后不断添加到数组中。如果 this.person 不正确，则相同。我该怎么做才能让它只添加一次？

如果我这样做：this.__arr = [...this.__arr, 'hello']，它可以将它添加到末尾，但我想添加一个元素到索引 1

Answer 1

两件事：

不要变异：

    if (this.__hello) {
      this.__arr = [...this.__arr].splice(1, 0, 'hello');
    }

您想在每次组件更新时都执行此操作，还是只执行一次？

    if (this.__hello && this.__arr[1] !== 'hello') {
      this.__arr = [...this.__arr].splice(1, 0, 'hello');
    }

在 React 中拼接一个数组不断重新渲染

Splice an array in React keeps rerendering

javascript

reactjs

lit-element