setState完成更新后，我可以执行函数吗？

作者

我对ReactJS非常陌生（比如，今天才开始）。我不太明白setState是如何工作的。我将React和easeljs结合起来，根据用户输入绘制一个网格。这是我的JS邮箱：
http://jsbin.com/zatula/edit?js，输出

代码如下：

var阶段；
var Grid=React.createClass({
getInitialState:函数（）{
返回{
行：10，
科尔斯：10
}
},
componentDidMount:函数（）{
这个.drawGrid（）；
},
drawGrid:function（）{
stage=newcreatejs.stage（“画布”）；
var矩形=[]；
var矩形；
//排
对于（var x=0；x&lt；this.state.rows；x++）
{
//纵队
对于（变量y=0；y&lt；this.state.cols；y++）
{
变量颜色=“绿色”；；
矩形=新建createjs.Shape（）；
矩形.graphics.beginll（颜色）；
矩形.graphics.drawRect（0,0,32,44）；
矩形x=x*33；
矩形y=y*45；
stage.addChild（矩形）；
变量id=矩形.x+“uquot；+矩形.y”；
矩形[id]=矩形；
}
}
stage.update（）；
},
updateEnumRows:函数（事件）{
this.setState（{rows:event.target.value}）；
这个.drawGrid（）；
},
updateNumCols:函数（事件）{
this.setState（{cols:event.target.value}）；
这个.drawGrid（）；
},
render:function（）{
返回(
&lt；div&gt；
&lt；div className=&quot；画布包装器&quot；&gt；
&lt；canvas id=“canvas”width=“400”height=“500”gt；lt；/canvas&gt；
&lt；p&gt；行：{this.state.Rows}&lt；/p&gt；
&lt；p&gt；列：{this.state.cols}&lt；/p&gt；
&lt；/div&gt；
&lt；div className=“数组形式”；
&lt；表格&gt；
&lt；label&gt；行数&lt；/label&gt；
&lt；select id=&quot；numRows&quot；value={this.state.rows}onChange={this.updateNumRows}&gt；
&lt；期权价值=&quot；1&gt；1&lt；/option&gt；
&lt；期权价值=&quot；2&gt；2&lt；/option&gt；
&lt；期权价值=&quot；5&gt；5&lt；/option&gt；
&lt；期权价值=&quot；10&quot；gt；10&lt；/option&gt；
&lt；期权价值=&quot；12&gt；12&lt；/option&gt；
&lt；期权价值=&quot；15&quot；gt；15&lt；/option&gt；
&lt；期权价值=&quot；20&quot；20&lt；/option&gt；
&lt；/select&gt；
&lt；label&gt；列数&lt；/label&gt；
&lt；select id=&quot；numCols&quot；value={this.state.cols}onChange={this.updateNumCols}&gt；
&lt；期权价值=&quot；1&gt；1&lt；/option&gt；
&lt；期权价值=&quot；2&gt；2&lt；/option&gt；
&lt；期权价值=&quot；5&gt；5&lt；/option&gt；
&lt；期权价值=&quot；10&quot；gt；10&lt；/option&gt；
&lt；期权价值=&quot；12&gt；12&lt；/option&gt；
&lt；期权价值=&quot；15&quot；gt；15&lt；/option&gt；
&lt；期权价值=&quot；20&quot；20&lt；/option&gt；
&lt；/select&gt；
&lt；/form&gt；
&lt；/div&gt；
&lt；/div&gt；
);
}
});
ReactDOM.render(
&lt；网格/&gt；，
document.getElementById（“容器”）
);

您可以在JSbin中看到，当您使用其中一个下拉菜单更改行数或列数时，第一次不会发生任何事情。下次更改下拉列表值时，网格将绘制到上一个状态的行和列值。我猜这是因为我的this.drawGrid（）函数在setState完成之前执行。也许还有别的原因

谢谢你的时间和帮助

setState（更新程序[，回调]）是一个异步函数：

https://facebook.github.io/react/docs/react-component.html#setstate

您可以在setState完成后使用第二个参数回调执行函数，如：

this.setState({
某个州：obj
}，（）=&gt{
this.afterSetStateFinished（）；
});

在React功能组件中也可以使用钩子执行相同的操作：

https://github.com/the-road-to-learn-react/use-state-with-callback#usage

查看useStateWithCallbackLazy：

从'use state with callback'导入{useStateWithCallbackLazy}；
const[count，setCount]=useStateWithCallbackLazy（0）；
设置计数（计数+1，（）=&gt{
afterSetCountFinished（）；
});

相关文章：

  1. 使用React路由器以编程方式导航
  2. 您是否可以在不调用setState的情况下强制React组件重新加载？
  3. 未捕获错误：不变冲突：元素类型无效：应为字符串（用于内置组件）或类/函数，但得到：对象
  4. 使用es6类时，React中的“super（）”和“super（props）”有什么区别？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with