为什么更改状态后整页会更新?

时间:2018-07-27 14:21:52

标签: javascript reactjs

嗨,我有一个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时,但是当我单击Toms之一时,整个状态已更新,整个页面都重新呈现 我应该怎么做才能解决这个问题,当我单击组件时,只需重新渲染该组件

1 个答案:

答案 0 :(得分:3)

一种更好的方法是让2个组件成为父组件,这将呈现16个子组件,子组件将具有布尔状态,而单击处理程序将具有简单的代码行setState({bar:!this.state.bar});例如。希望对您有帮助!