响应setState在调用时呈现组件两次。

Question

我很新，反应如此，与我一起裸露。我试图构建一个连接4游戏，其中包含7个列组件的棋盘组件都包含6个空间组件。每列上方都有一个Drop按钮，用于将该部分放入列中。为了在“红色”和“黑色”玩家之间交替，我创建了一个返回布尔值的状态“redOrBlue”。

简而言之，当单击Drop按钮时，我想切换“redOrBlue”的值以跟踪它的转向。我已经将onClick函数设置为setState（{redOrBlue：！this.state.redOrBlue）}，但是，调用此函数将导致在点击按钮的列正下方显示一个额外的列。我明白，setState会自动重新渲染DOM，但我怎样才能避免渲染组件的重复？谢谢你的帮助！

class Column extends Component{ 
    constructor(){ 
    super(); 
    this.state = { 
     myArray: [], 
     buttonArray: [], 
     buttonNumber: null, 
     newArray: [], 
     redOrBlue: true 
    } 
    } 
    makeRow(){ 
    var component = <Space className="space"/> 
    for(var i = 0; i < 6; i++){ 
     this.state.myArray.push(component); 
    } 
    } 

    handleClick(){ 
    var num = this.props.colNumber; 
    var array = this.props.boardArray[num]; 
    var boolean = false; 
    var color; 
    if(this.state.redOrBlue === true){ 
     color = "red" 
    }else{ 
     color = "black" 
    } 
    for(var i = 5; i > -1; i--){ 
     if(boolean === false){ 
     if(array[i] === null){ 
      array[i] = color; 
      boolean = true; 
     } 
     } 
    } 
    this.setState({redOrBlue: !this.state.redOrBlue}) 
    console.log(array) 
    } 

    render(){ 
    {this.makeRow()} 
    return(
     <div className="column"> 
     <DropButton onClick={() => this.handleClick()} id={'button-' + this.props.colNumber} buttonNumber={this.props.colNumber} className={this.props.className}/> 
     {this.state.myArray.map(function(component, key){ 
      return component 
     })} 
     </div> 
    ) 
    } 
} 

Answer 1

有迹象表明，你需要在你的代码改变很多东西：

*所有首先从不店在状态变量的ui items，state变量应该只包含数据和值。 *

* state变量不会做任何更改this.state.a = '' or this.state.a.push({})，始终将state值视为不可变且仅使用setState来更改该值。

*如果您想创建dynamically，请务必在render内部直接创建ui part。

呼叫从makeRow法渲染，它会直接返回用户界面，而不将它存储在状态变量，像这样：

makeRow(){ 
    var component = []; 
    for(var i = 0; i < 6; i++){ 
     component.push(<Space key={i} className="space"/>); 
    } 
    return component; 
} 

render(){ 
    return(
     <div className="column"> 
      <DropButton onClick={() => this.handleClick()} id={'button-' + this.props.colNumber} 
       buttonNumber={this.props.colNumber} className={this.props.className}/> 
      {this.makerow()} 
     </div> 
    ) 
} 

Answer 2

从您的渲染功能中删除{this.makeRow()}。你所要做的就是在状态中添加另一行，每次组件呈现时都采用非犹太人的方法。尝试是这样的：

constructor(){ 
    super(); 
    this.state = { 
     myArray: [], 
     buttonArray: [], 
     buttonNumber: null, 
     newArray: [], 
     redOrBlue: true 
    } 
    this.makeRow(); 
    } 
    makeRow(){ 
    var tempArray = []; 
    var component = <Space className="space"/> 
    for(var i = 0; i < 6; i++){ 
     tempArray.push(component); 
    } 
    this.setState({ myArray: tempArray }}; 
    }