单击创建一个React组件，需要区分每个组件

如何解决单击创建一个React组件，需要区分每个组件

我制作了这样一个表格，用于放置带有各自价格，数量的商品...此外，还有一个按钮，每单击一次，它就会创建一个新商品。 （把照片看得更清晰）

事实是，我需要一种区分每一行的方式，我说的是，在“数字”正方形中应该有1,2,3 ...这对我来说非常重要，因为以后我需要发送将信息存储到数据库中，但是我的问题是我不知道如何区分每一行。我在这里输入代码

class LinArt extends Component{
constructor(){
  super()
  this.state = {
    quan:2,price:20,dto:10,count:1
  }
  this.newArt = this.newArt.bind(this)
}

newArt(){
  this.setState({count:this.state.count+1})
  }
  showArt(){
    const total = (this.state.cant * this.state.preu) * (1-(this.state.dto/100));
    let lines =[];
    for(let i=0; i < this.state.count; i++){
      lines.push(
        <div key={i}>
          
        <TextField type="number" disabled={true} value={this.state.count} label="Num"/>
       <TextField label="Descripció" variant="outlined"/>
       <TextField type="number" label="Cant" value={this.state.quan}/>
       <TextField type="number" label="Price" value={this.state.price}/>
       <TextField  type="number" label="Dto" value={this.state.dto }}/>
       <TextField  type="number" disabled={true} value={total} label="Total"/>
       <TextField type="number" disabled={true} value="21" label="IVA"/>
        <br/><hr/>
        </div>
      )
    }
    return linies || null;
  }
  render(){
    return(
      <div>
      
       {this.showArt()}
<Button onClick={this.newArt}>New article </Button>
      </div>
    )
  }

感谢您的关注，非常感谢您的帮助！

解决方法

查看您的代码，如果希望num列递增，则应将i + 1递增变量作为值添加到num字段，以便在运行循环时，它给出递增的值并从{开始{1}}，而不是1。像这样

0