React native 如何使用react native渲染多个视图？

我已经使用自动完成创建了一个选择屏幕，基本上我想做的是选择一个项目，将该项目的数量更新为所需的数量，如果您希望向列表中添加更多项目，有一个按钮可以创建一个新字段（自动完成+所需数量），代码如下（但这行不通，我正在展示我认为应该如何管理）

render（）{
const{query}=this.state；
const itemData=this.state.items；
让mapArray=this.state.amount.slice（）；
返回(
{
mapArray.map（（l，i）=>(

我想要的是根据按下“+”底部按钮的次数呈现多个字段（自动完成+金额选择器），同时我需要保留所有项目和金额的记录

我可能在很多方面都做错了，我仍然在学习和做很多错事。如果你有任何关于更简单的方法的建议，我将不胜感激

--编辑--
感谢@Mohammed Ashfaq，它可以处理新字段，但在所有视图中，它保持了相同的自动完成值：

OnPress函数Add1用于生成更多字段（自动完成+金额选择）


用于Add2的OnPress函数可增加特定索引的金额值

onPress={() => {
  let clonedAmountArray = this.state.amount.slice();
  clonedAmountArray[i] += 1; 
  this.setState({ amount : clonedAmountArray}) 
}

onPress={() => {
  var clonedAmountArray = this.state.amount.slice();
  clonedAmountArray[i] -= 1; 
  this.setState({ amount : clonedAmountArray}) 
}


按下减号图标的功能可减少特定索引的金额值

onPress={() => {
  let clonedAmountArray = this.state.amount.slice();
  clonedAmountArray[i] += 1; 
  this.setState({ amount : clonedAmountArray}) 
}

onPress={() => {
  var clonedAmountArray = this.state.amount.slice();
  clonedAmountArray[i] -= 1; 
  this.setState({ amount : clonedAmountArray}) 
}


可能还有更多遗漏，这不是添加另一个视图，还有，我应该如何更新“this.setState（{amount:this.state.amount[I]+1}）”的每个索引在图像中有两个+图标，一个在底部{Add1}，另一个在自动完成组件{Add2}的右侧连同-减号图标。你能解释一下你想用Add1和Add2执行什么功能吗？Add1是为了生成更多的字段（自动完成+金额选择），Add2和减号是为了金额选择，他们应该更新this.state.amount[X]，其中X是该字段金额的索引。请检查更新的答案：1。）替换了拼接（）方法和slice（）.2。）添加了两个函数来增加和减少amount的值。这是可行的，但新视图的值完全相同，即使我设置key={I}，我如何修复它？（我编辑了anwser）