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

}

原文由 Angel Cuenca 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

请注意改变调用它们的数组的方法与返回调用它们的数组的变异版本的方法之间的区别。

prevState.components.splice(0, 0, element) 返回一个新数组，其中包含已删除的元素，对于您的目的而言，这将什么都不是。

值得注意的是， splice 也改变了组件数组；改变你的状态元素是一件坏事；避免这种情况的一种简单方法是创建数组的克隆并将 其 拼接。

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

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

您可以考虑的其他选项是使用 React 的 不变性助手 或使用 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)
}

原文由 Hamms 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

试试这个方法：

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

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

代码笔演示

原文由 Dan Kreiger 发布，翻译遵循 CC BY-SA 3.0 许可协议