之前使用setState重新赋值后,在render中直接渲染到页面上。
这次遇到了在一个点击事件中,需要setState赋值后将变量传给父组件。
this.state = {
starttime: "2022-11-01",
endtime: "2022-11-10",
};
changeTime = (data, dateString) => {
const { starttime, endtime } = this.state;
//dateString:一个数组,包含两个值
this.setState({
starttime: dateString[0],
endtime: dateString[1],
});
this.props.getDates(this.state.starttime, this.state.endtime); //子传父
};
原来的代码是这样的,但是传递出来的之后在父组件内打印发现两个值并没有更新,查阅资料发现需要在setState这个方法内再写一个箭头函数。如下
changeTime = (data, dateString) => {
//dateString:开始/结束时间
this.setState({ starttime: dateString[0], endtime: dateString[1] }, () => {
const { starttime, endtime } = this.state;
this.props.getDates(this.state.starttime, this.state.endtime);
});
};
这样可以直接在setState重新赋值后就可以立马调用方法.