React中有没有一种方法可以在其他函数中调用一个改变状态的括号函数

Question

我正在尝试调用函数check_empty_cell，该函数被声明为，如下所示：

check_empty_cell(col_index, row_index) {
var filled_cols = this.find_filled_cols();
var filled_rows = this.find_filled_rows();
if (filled_cols.includes(col_index) && filled_rows.includes(row_index)) {
this.setState({
empty_cell: false
})
}
}

函数调用：

enter_cell(row_index, rows) {
for (var col_index = 0; col_index < rows; col_index++) {
this.check_empty_cell(col_index, row_index);
}
}

所以基本上，我想为每对col_index和row_index调用check_empty_cell函数。但是这个错误出现了：

超过了最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制了嵌套更新的数量，以防止无限循环。

此错误将我引向check_empty_cell中使用的setState。

我试着为此寻找解决方案，我找到了这样的解决方案：https://stackoverflow.com/a/48497410

根据这个解决方案，我必须使用括号函数，因为我正在发送参数。如何使用它并更正此错误？

我试过在中这样做

1. check_empty_cell：

check_empty_cell(col_index, row_index) {
var filled_cols = this.find_filled_cols();
var filled_rows = this.find_filled_rows();
if (filled_cols.includes(col_index) && filled_rows.includes(row_index)) {
this.setState({
empty_cell: false
})
return true;
}
return false;
}

2. enter_cell：

enter_cell(row_index, rows, cols) {
var cells = [];
console.log('rows: ', rows)
for (var col_index = 0; col_index < rows; col_index++) {
if(this.check_empty_cell(col_index, row_index)){
return cells;
};
this.after_empty_cell_push(col_index, row_index, cells, cols);
}
return cells
}

但错误仍然会出现。

Answer 1

React确实会将某个时间内的重新渲染次数限制在一个硬限制内。您在循环中调用setState，这将导致循环的每次迭代都会重新呈现。你已经达到极限了。我建议调用setState一次并打破循环

check_empty_cell(col_index, row_index) {
var filled_cols = this.find_filled_cols();
var filled_rows = this.find_filled_rows();
if (filled_cols.includes(col_index) && filled_rows.includes(row_index)) {
return false
}
}
enter_cell(row_index, rows) {
for (var col_index = 0; col_index < rows; col_index++) {
if(this.check_empty_cell(col_index, row_index) === false) {
this.setState({emptyCell: false})
break;
};
}
}