有什么方法可以确保在实际更新状态render
后调用?setState
据我所知,setState
是异步的。我已经尝试将render
回调作为setState
,但它仍然在状态更新之前呈现。
HTML 代码:
<div id="root"></div>
反应代码:
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
squares: []
};
this.create = this.create.bind(this);
}
create() {
console.log('squares before: ' + this.state.squares);
var a = [];
for (var i = 0; i < 16; i++) {
a.push(undefined);
}
i = Math.floor(Math.random() * 8);
a[i] = 2;
i = Math.floor(Math.random() * 8) + 8;
a[i] = 2;
console.log('new squares: ' + squares);
console.log('non-updated squares: ' + this.state.squares);
this.setState({
squares: a
}, console.log('updated squares: ' + this.state.squares);
}
componentWillMount() {
this.create();
}
render() {
console.log('rendering');
return (<div>
<table className="table">
<tbody>
<tr>
<td className="td"><Number number={this.state.squares[0]}/></td>
<td className="td"><Number number={this.state.squares[1]}/></td>
<td className="td"><Number number={this.state.squares[2]}/></td>
<td className="td"><Number number={this.state.squares[3]}/></td>
</tr>
<tr>
<td className="td"><Number number={this.state.squares[4]}/></td>
<td className="td"><Number number={this.state.squares[5]}/></td>
<td className="td"><Number number={this.state.squares[6]}/></td>
<td className="td"><Number number={this.state.squares[7]}/></td>
</tr>
<tr>
<td className="td"><Number number={this.state.squares[8]}/></td>
<td className="td"><Number number={this.state.squares[9]}/></td>
<td className="td"><Number number={this.state.squares[10]}/></td>
<td className="td"><Number number={this.state.squares[11]}/></td>
</tr>
<tr>
<td className="td"><Number number={this.state.squares[12]}/></td>
<td className="td"><Number number={this.state.squares[13]}/></td>
<td className="td"><Number number={this.state.squares[14]}/></td>
<td className="td"><Number number={this.state.squares[15]}/></td>
</tr>
</tbody>
</table>
</div>);
}
}
class Game extends React.Component {
newGame() {
this.refs.table.create();
}
render() {
return (<div>
<Table ref="table"/>
<button id="newGame" onClick={this.newGame.bind(this)}>New Game</button>
</div>);
}
}
基本上,这里发生的事情是首先记录“渲染”,然后是“更新方块:...”,如下所示:
squares before: [undefined, 2, undefined, undefined, undefined, 2]
new squares: [undefined, undefined, 2, undefined, 2, undefined]
non-updated squares: [undefined, 2, undefined, undefined, undefined, 2]
rendering
updated squares: [undefined, undefined, 2, undefined, 2, undefined]
我尝试进行回调setState
render
,但第二次渲染将在第一次渲染之后但在setState
更新之前渲染state
:
this.setState({
squares: a
}, this.render);
它记录了:
squares before: [undefined, 2, undefined, undefined, undefined, 2]
new squares: [undefined, undefined, 2, undefined, 2, undefined]
non-updated squares: [undefined, 2, undefined, undefined, undefined, 2]
rendering
rendering
任何帮助将不胜感激。提前致谢!