響應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 }}; 
    }