Javascript React.js：如何在添加新元素时使计数器不能重置

创建新计数器时，它将继承

this.state = {
      count: 0
    }

我不明白如何维持这个职位

我想做的是当我添加新元素时，计数器保存其在最后一项上的位置，请帮助

const数据=[
{id:0，名称：'element'}，
{id:1，名称：'element'}，
{id:2，名称：'element'}
]
常量appendItem=（）=>{
数据推送({
id:data.length，
名称：“元素”
})
render（）
}
类计数器扩展了React.PureComponent{
构造器（道具）{
超级（）；
此.state={
计数：0
}
}
handleClick=（）=>this.setState（{count:this.state.count+1}）；
render（）{
返回
{this.state.count}
+
}
}
常量列表项=
（{item}）=>
{item.id}-{item.name}-
常量渲染器=
（项目，idx）=>
常数表=
（{data}）=>

{data.map（renderListItem）}

常量ListContainer=
() =>
添加元素
常量渲染=
() =>
ReactDOM.render（，document.getElementById（'container'））
render（）

我在Codepen上尝试了计数器演示，效果很好。你能详细说明一下你面临的问题在哪里吗？当我点击元素3时，假设3次，新的元素4必须以数字3开始，继承自前一个值，依此类推。对不起，可怜的英语这只适用于新创建的元素？或者，如果您单击以增加第一个计数器，它是否也会影响后面的所有内容？首先，我们有3个计数器值为0的元素，假设我在“+”上单击了5次，收到了一个5，然后单击“添加元素”，默认情况下将一个新项目添加到计数器5的值，然后单击，假设在最后一个元素中单击了6次，最后是11。再次单击“添加元素”，获得默认值为11的新项目。对不起，我的解释太愚蠢了（解决此问题非常必要。感谢您的反馈如果您希望新的

计数器

从以前的

计数器

获取计数值，您必须全局跟踪该计数。我在Codepen上尝试了计数器演示，效果很好。当我单击elem时，您能详细说明您面临的问题吗ent 3，假设3次，新元素4必须以数字3开头，从上一个值继承而来，依此类推。抱歉，糟糕的英语这只适用于新创建的元素？或者，如果单击以增加第一个元素，它是否也会在后面碰撞所有内容？首先，我们有3个值为计数器0的元素，假设我单击了5次在“+”上收到一个5，然后单击“添加元素”，并在默认情况下将一个新项目的值设置为计数器5，然后单击，假设在最后一个元素中单击了6次，最后是11。再次单击“添加元素”，并在默认情况下获得一个值为11的新项目。对于愚蠢的解释，抱歉（解决此问题非常必要。感谢您的反馈如果您希望新的

计数器

从以前的

计数器

获取计数值，您必须全局跟踪该计数。

const data = [
    { id: 0, name: 'element'},
    { id: 1, name: 'element'},
    { id: 2, name: 'element'}
]

const appendItem = () => {
  data.push({
    id: data.length,
    name: 'element'
  })
  render()
}

class Counter extends React.PureComponent {
  constructor(props) { 
    super();
    this.state = {
      count: 0
    }

  }

  handleClick = () => this.setState({count: this.state.count + 1});

  render() {
    return <span>
      {this.state.count}
      <button onClick={this.handleClick}>+</button>
    </span>
  }
}

const ListItem =
  ({ item }) =>
    <li>{item.id} - {item.name} - <Counter /></li>

const renderListItem =
    (item, idx) => 
    <ListItem key={idx} item={item}/>

const List =
    ({ data }) =>
    <ul>
      {data.map(renderListItem)}
    </ul>

const ListContainer = 
    () =>
    <div>
        <List data={data}/>
      <button onClick={appendItem}>Add element</button>
    </div>

  const render = 
    () =>
      ReactDOM.render(<ListContainer />, document.getElementById('container'))

  render()