棋盘式组件生命周期

Question

我正在尝试创建一个棋盘，它将给定的整数作为输入进行调整大小，并将一个int乘int棋盘作为输出返回。目前，我的棋盘是从一个状态为8的集合变量渲染的，但每次我尝试添加输入时，应用程序都会崩溃。我正试图找到一种更有效地理解组件生命周期的方法。下面是我的棋盘组件的代码。

import React, { Component } from 'react'

class Checkerboard extends Component {
constructor(props) {
super(props)
this.state = {
checkers: [],
size: 8,
input: null
}
this.handleSubmit = this.handleSubmit.bind(this)
this.handleChange = this.handleSubmit.bind(this)
}

// This function divides the squares from state into rows and draws the board
drawBoard = (squares) => {
console.log("drawBoard running...")
console.log("drawing board from state:", squares)
let rows = []
for (let i=0; i<squares.length; i+=this.state.size) {
rows.push(squares.slice(i,i+this.state.size));
}
console.log("Rows: ", rows)
return (rows.map(row => (
<div className="row" style = {{ display: 'flex' }}>
{row.map(square =>(
<div className="square" key = {square.key} style = {{
backgroundColor: `${square.color}`,
height: '50px',
width: '50px',
margin: '0 auto',
display: 'inline-block',
}}>
</div>
))}
</div>
)))
}

addSquares = (col) => {
console.log("adding squares...")
let squares = []
for (let i=0; i<(col ** 2); i++) {
if ((((Math.floor(i/this.state.size)+1)%2))!== 0){
if (((i-((Math.floor(i/this.state.size))*col)+1)%2) !==0){
squares.push( { key: i, row: Math.floor(i/this.state.size), column: i-((Math.floor(i/this.state.size))*col), color: "white" } )
continue
} else {
squares.push( { key: i, row: Math.floor(i/this.state.size), column: i-((Math.floor(i/this.state.size))*col), color: "black" } )
continue
} 
}
else if (((Math.floor(i/this.state.size)+1)%2) === 0) {
if (((i-((Math.floor(i/this.state.size))*col)+1)%2) !==0){
squares.push( { key: i, row: Math.floor(i/this.state.size), column: i-((Math.floor(i/this.state.size))*col), color: "black" } )
continue
} else {
squares.push( { key: i, row: Math.floor(i/this.state.size), column: i-((Math.floor(i/this.state.size))*col), color: "white" } )
continue
}
}
}
console.log(squares)
return this.setState({ checkers: squares })
}
componentDidMount() {
this.addSquares(this.state.size)
}
handleChange(event) {
this.setState({ input: event.target.value})
}
handleSubmit(event) {
event.preventDefault()
this.setState({ size: this.state.input})
console.log(this.state.size)
}

render() {
return (
<div className="checkerBoard" style={{overflow: 'hidden'}}>
{this.drawBoard(this.state.checkers)}
<form onSubmit={this.handleSubmit}>
<input placeholder="Enter desired dimensions" type="integer" onChange={this.handleChange}></input>
<button type="submit">Submit</button>
</form>
</div>
)   
}
}
export default Checkerboard;

Answer 1

"。。。我正试图找到一种更有效地理解组件生命周期的方法">

我已经阅读了您的代码(没有经过addSquares()中的数学运算(，对于您的生命周期，我看到了以下模式：

1. 组件安装
2. state负载
3. addSquares()由componentDidMount()调用，给定state值
4. 您的组件现在正在以用户身份等待您的响应
5. 设置一个数字，从而更改state一次，从而导致渲染
6. 单击"提交"，从而再次更改state，从而导致另一次渲染
7. 你的应用程序崩溃

我希望我做对了，如果是这样的话，我可以想出它坠毁的一个原因：你的方块永远不会重新渲染，因为唯一定义它们的是componentDidMount()，作为它的名字，它只有在挂载(一次(时才会被调用。您可以使用componentDidUpdate()再次调用addSquares()。

Answer 2

我对您的代码进行了一些处理。当我修改东西的时候，我一直在运行handleSubmit函数，所以这让我觉得你的bind语句有问题。

我喜欢创建一个大小的棋盘的想法。这并不是一个真正的错误答案，但如果你想检查一下的话，最终还是用钩子进行了重构。

https://codesandbox.io/s/sweet-hellman-u4gvf?file=/src/App.js