Question

我正在尝试使用splice将新的components添加到数组中。如果我使用concat，最后会正确添加所有元素，但我还需要使用splice在数组的开头或中间添加。有什么建议吗？

class App extends React.Component {
  state = {
    components: []
  };

  addNewElement = (element) => {      
    this.setState(prevState => ({   
      //Works fine
      //components: prevState.components.concat(element)

      components: prevState.components.splice(0, 0, element)
    }));
  };

}

Answer 1

Array#splice in situ 并改变原始数组。您必须使用Array#slice创建一个新实例（复制它），然后对其进行修改。

addNewElement = (element) => {
   const newArr = prevState.components.slice();   
   newArr.splice(2, 0, 'foo');         // add 'foo` string at `2nd` index
   this.setState(prevState => ({   
      components: newArr;
   }));
};

Answer 2

要注意区别于调用它们的数组的方法和返回调用它们的数组的变异版本的方法之间的区别。

prevState.components.splice(0, 0, element)返回一个新数组，其中包含已删除的元素，为了您的目的，这些元素将一无所获。

值得注意的是，splice也会改变组件数组;改变你的国家元素是一件坏事;避免这种情况的一种简单方法是创建数组的克隆并拼接。

this.setState(prevState => {
  const components = prevState.components.slice(0);
  components.splice(0, 0, element);
  return { components };
});

这是功能性的，但相对不优雅。

您可以考虑的其他选项是使用React immutability helper或使用slice将原始数组分成两部分，然后将concat所有位分开：

const i = // index at which to insert the new elements
const left = prevState.components.slice(0, i)
const right = prevState.components.slice(i)
return {
  components: left.concat(elements, right)
}

Answer 3

splice()返回已从数组中删除的元素数组。如果没有删除任何元素，splice将返回一个空数组。

但是，splice将更改其调用的数组的内容。您需要在更新的数组上设置状态，而不是splice返回的状态。

试试这个方法：

addNewElement(element) {
  this.state.components.splice(0, 0, element);
  this.setState({ components: this.state.components });
}

下面是一个工作片段，演示如何在React组件中使用splice在选定索引处插入新元素。

CodePen Demo

React中的拼接方法

3 个答案: