javascript - React中的拼接方法

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

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

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

试试这个方法:

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

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

CodePen Demo