Javascript 反应-从100个按钮数组中更改一个按钮的状态，并在一次单击中重置所有按钮的状态

所以，我有100个来自数组的映射按钮，类似这样的

        {
          buttons.map((button, index) =>
            <StyledGameButton
              key={index}
              value={button}
              onClick={this.checkButton}>
              { button < 10 ? `0${button}` : button }
            </StyledGameButton>
          )
        }

问题是我想设置reset按钮，这会将所有按钮更改为“unclicked”，因此我必须一次单击就从所有按钮中删除数据属性。我该怎么做？或者，有没有更好的解决方案来管理单个按钮的“状态”，而不创建100个状态？

100复选框演示 使用数组来存储状态就可以了

const list=[…数组（100）.keys（）].map（x=>（{id:x}））；
常量应用=（）=>{
const[selected，setSelected]=React.useState（[]）；//使用空列表初始化
const onChangeHandler=id=>（）=>{//传递索引/标识参数
选中。包含（id）//检查是否已选中
？setSelected（selected.filter（x=>x！==id））//是，删除
：setSelected（[…selected，id]）；//否，添加
};
const onRemove=（）=>{
setSelected（[]）；//全部删除，设置为空列表
};
返回(
{list.map（项=>(
))}


全部删除
{已选择。加入（“，”）}
);
}
render（，document.getElementById（“根”））
如果该帖子解决了您的问题，可能会重复？请提供一些反馈，我们将不胜感激。看见
  checkButton = e => {
    const buttonId = e.currentTarget.getAttribute('value');
    const nextButton = this.state.currentButton === null ? 0 : this.state.currentButton + 1;
    if (buttonId == nextButton){
      this.setState({
        currentButton: parseInt(buttonId),
      });
      if (this.state.currentButton === 99) {
        this.gameEnd();
      };
      e.currentTarget.setAttribute('data-status', 'correct');
    }
  }