Javascript 将每个按钮分配给它'；美国自己的州计数

下面的代码显示了我当前的组件设计。这是一个计数器组件，负责增加相应数组项的计数器，并将单击的项添加到购物车中。我试图找出是否有某种方法可以将items数组中的每个数组项分配给其自己的状态计数值。当前，屏幕显示四个数组项，每个数组项旁边都有一个按钮和一个计数。单击任何特定项的“增量”按钮时，所有按钮的状态计数都会更新并呈现，这不是我想要的。我试着用几种方法来分配每个按钮的状态计数，但没有找到正确的方法。我想以某种方式将状态计数值绑定到每个按钮，以便每个按钮都有其各自的状态计数值。如果有人能提供一些提示或见解，我将不胜感激，因为我不知道如何隔离每个按钮的状态计数值并使其唯一，以便在单击某个值的按钮时，仅更新该特定按钮（位于“增量”按钮旁边）的状态计数，而不更新其他按钮的状态计数

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      cart: [],
    };
  }

  handleIncrement = (e) => {
    this.setState({
      count: this.state.count + 1,
      cart: [...this.state.cart, e.target.value],
    });
  };

  render() {
    const listItems = this.props.items.map((item) => (
      <li key={item.id}>
        {item.value}
        <button onClick={this.handleIncrement}>+</button>
        {this.state.count}
      </li>
    ));
    return (
      <div>
        {listItems}
      </div>
    );
  }
}

类计数器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
计数：0，
购物车：[]，
};
}
handleIncrement=（e）=>{
这是我的国家({
计数：this.state.count+1，
购物车：[…this.state.cart，e.target.value]，
});
};
render（）{
const listItems=this.props.items.map（（项）=>(

{item.value}
+
{this.state.count}

));
返回(
{listItems}
);
}
}

我在这里做的是删除

构造函数

，更新

计数器

组件道具，在

示例

组件中更新如何更新购物车的事件，调整

计数器

组件，用于

购物车

组件，我添加了

componentDidMount

和

shouldComponentUpdate

确保组件仅在props

listary

更改时才会重新渲染。这是密码

类示例扩展了React.Component{
状态={
购物车：[]，
项目：[
{id:1，值：“L1”}，
{id:2，值：“L2”}，
{id:3，值：“L3”}，
{id:4，值：“L4”}
]
}
render（）{
const{cart}=this.state
返回(
列表
{items.map(
（{id，…rest}）=>(
)
) }
)
}
HandleadCart=（项目）=>{
this.setState（（{items}）=>（[…items，item]））
}
}
类计数器扩展了React.Component{
状态={
计数：0
}
handleIncrement=（）=>{
this.setState（（{count}）=>（{count:count++}））
}
render（）{
const{count}=this.state
const{cart，value}=this.props
返回(
{value}
+
{count}
)
}
}
类Cart扩展了React.Component{
状态={
购物车：[]
}
addTo=（）=>(
名单：
)
componentDidMount（）{
const{cart}=this.props
this.setState（{cart}）
}
shouldComponentUpdate（{listary}）{
返回listArray.length！==this.state.cart.length
}
render（）{
返回(
)
}
}
常量列表函数=（{addClick}）=>(
添加到列表中
)

如果要在不呈现按钮的情况下添加到项目列表，可以添加自定义属性以标记它是自定义添加：

类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：[
{id:1，值：“L1”}，
{id:2，值：“L2”}，
{id:3，值：“L3”}，
{id:4，值：“L4”}，
]
}
}
addToItems=项目=>{
这是我的国家({
项目，
});
}
render（）{
var cartArray=[]；
返回(
列表
{this.state.items.map（（item）=>
)}
);
}
}
类计数器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
计数：0，
};
}
handleIncrement=（）=>{
这是我的国家({
计数：this.state.count+1，
});
this.props.cart.push（this.props.value）；
};
addTo=（）=>{
const{items}=this.props；
设lastId=items.length；
lastId++；
this.props.addToItems([
…项目，
{
id:lastId，
值：`L${lastId}`，
习俗：没错，
}]);
};
render（）{
返回(
{this.props.value}
{
！this.props.custom&&
(
+                 
{this.state.count}
)
}
);
}
}
类Cart扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
);
返回null；
}
}
常量列表函数=（{addClick}）=>(
添加到列表中
);
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);