为什么在我更改状态时会更新整个页面?

嗨,我有一个react应用程序,这是我的代码:

this.state = {
  bars: [{
    tom1: Array(16).fill('0'),
  }],
}
tom1Click= (i, j) => {
  let bar = this.state.bars.slice();
  if(bar[i].tom1[j] === '1'){
    bar[i].tom1[j] = '0';
  }
  else
    bar[i].tom1[j] = '1';
  this.setState({bars: bar})
}

我的页面中有16个Tom组件,我希望当其中一个单击时,状态值更改为0或1,但是当我单击其中一个Tom时,整个状态将更新,整个页面将重新提交 我该怎么做才能处理这个问题,当我单击组件时,只有那个组件重新提交器