遊戲生活：無法讀取屬性「狀態」未定義

Question

情況：

我創建了幾個點，然後點擊開始。該錯誤彈出一百萬次（邏輯，因爲有100個單元格和一個setInterval）。

---

錯誤：

Uncaught TypeError: Cannot read property 'state' of undefined 
    at Object.isAlive (main.js:21496) 
    at Object.life (main.js:21533) 
    at setInterval (main.js:21508) 

---

問題：

是什麼原因造成的錯誤，我該如何解決？

---

GAME壽命的：

---

CODE：

var Cell = createReactClass ({ 

getInitialState() { 
    return { 
     selected : false, 
     dying: true, 
     started: false, 
    } 
}, 

componentWillReceiveProps(nextProps) { 

    nextProps.array[nextProps.column][nextProps.row] = this; 

    var evolution; 

    if(nextProps.start && this.state.started == false) { 
     let evolution = setInterval(() => { 
      this.life(nextProps); 
      console.log("DYING:"+this.state.dying); 
      this.setState({ 
       selected: !this.state.dying 
      }); 
     }, 500); 
     this.setState({ 
      started: true, 
      evolution 
     }) 
    } 
    else { 
     clearInterval(this.state.evolution); 
     this.setState({ 
      started: false 
     }) 
    } 
}, 

isAlive(e) { 
    return (e.state.selected); 
}, 

life(nextProps) { 

    var array = nextProps.array; 

    var neighbours = 0; 

    var i = this.props.column; 
    var j = this.props.row; 
    var x = 40; 
    var y = 40; 

    if(this.isInBoard(i, j, x, y)) { 
     if(this.isInBoard(i + 1, j, x, y)) { 
      if (this.isAlive(array[i+1][j])) { 
       neighbours++; 
      } 
     } 
     if(this.isInBoard(i - 1, j, x, y)) { 
      if (this.isAlive(array[i-1][j])) { 
       neighbours++; 
      } 
     } 
     if(this.isInBoard(i, j + 1, x, y)) { 
      if (this.isAlive(array[i][j+1])) { 
       neighbours++; 
      } 
     } 
     if(this.isInBoard(i, j - 1, x, y)) { 
      if (this.isAlive(array[i][j-1])) { 
       neighbours++; 
      } 
     } 
     if(this.isInBoard(i - 1, j + 1, x, y)) { 
      if (this.isAlive(array[i-1][j+1])) { 
       neighbours++; 
      } 
     } 
     if(this.isInBoard(i + 1, j - 1, x, y)) { 
      if (this.isAlive(array[i+1][j-1])) { 
       neighbours++; 
      } 
     } 
     if(this.isInBoard(i + 1, j + 1, x, y)) { 
      if (this.isAlive(array[i+1][j+1])) { 
       neighbours++; 
      } 
     } 
     if(this.isInBoard(i - 1, j - 1, x, y)) { 
      if (this.isAlive(array[i-1][j-1])) { 
       neighbours++; 
      } 
     } 
    } 



    if (this.state.selected) { 
     console.log("SELECTED!"); 
     if (neighbours == 3 || neighbours == 2) { 
      this.setState({ 
       dying: false 
      }) 
     } 
     else if (neighbours < 2) { 
      this.setState({ 
       dying: true 
      }) 
     } 
     else if (neighbours > 3) { 
      this.setState({ 
       dying: true 
      }) 
     } 
    } 
    else { 
     if(neighbours == 3) { 
      this.setState({ 
       dying : false 
      }) 
     } 
    } 
}, 

isInBoard(i, j, x, y) { 
    var flag = false; 
    if (i >= 0 && i <= x && j >= 0 && j <= y) { 
     flag = true; 
    } 
    return flag; 
}, 

handleClick() { 
    this.setState({ 
     selected: !this.state.selected 
    }) 
}, 

render() { 
    return <td onClick = {this.handleClick} className={this.state.selected ? "cell selected" : "cell"}></td>; 
} 

}）

另外：

var Board = createReactClass ({ 

getInitialState() { 
    var cellArray = []; 
    for (var y = 0; y < 40; y++) { 
     var cells = []; 
     for (var x = 0; x < 40; x++) { 
      cells.push(<Cell key={x + y*40} id = {x + y*40} row = {x} column={y} />); 
     } 
     cellArray.push(cells); 
    } 
    return { 
     array: cellArray 
    } 
}, 

render() { 

    var rows = []; 
    for (var y = 0; y < 40; y++) { 
     var cells = []; 
     for (var x = 0; x < 40; x++) { 
      cells.push(<Cell start= {this.props.start} array={this.state.array} key={x + y*40} id = {x + y*40} column ={x} row={y} />); 
     } 
     rows.push(<tr key={y}>{cells}</tr>); 
    } 
    return <table><tbody>{rows}</tbody></table>; 

} 

}）

var Game = createReactClass ({ 

    getInitialState() { 
     return { 
      start: false 
     } 
    }, 

    handleStartClick() { 
     this.setState({ 
      start: true 
     }) 
    }, 

    handleClearClick() { 
     this.setState({ 
      start: false 
     }) 
    }, 

    render() { 
     return (
      <div> 
       <h1>React.js Game of Life</h1> 
       <div className="buttons"> 
        <button className="btn btn-danger" onClick={this.handleClearClick}>Clear</button> 
        <button className="btn btn-success" onClick={this.handleStartClick}>Start</button> 
       </div> 
       <Board start={this.state.start}/> 
      </div> 
     ); 
    } 

}) 

Answer 1

我認爲這個問題是，你在組件上引用state，但它不是通過「裁判」到組件實例，所以你不會有狀態。我想你想看看refs。你有沒有試過記錄什麼傳遞給isAlive？

由於這看起來更像是一個學習應用程序，而不是一個真實的項目，所以我建議花更多時間學習React組件和thinking in React，然後再發布每個錯誤......我們願意幫助但無法完成工作你:)

歡迎來到React，祝你好運！