改变redux里面state,引用了state里面值的组件第一次组件不更新
程序员文章站
2022-03-11 16:17:25
...
A组件改变redux中state的值:
handleClick = (e:(React.MouseEvent|HTMLElement))=>{
let width = '0px' , translateXValue = '0px';
if(e instanceof HTMLElement){
width = '88px'
}else{
let target = e.target as HTMLElement;
key = Number(target.getAttribute("data-key"));
this.setState({
tabKey:key,
})
if(key == 1){
width = target.offsetWidth + "px";
translateXValue = '0px';
}
if(key == 2){
width = target.offsetWidth + "px";
translateXValue = '120px';
}
if(key == 3){
width = target.offsetWidth + "px";
translateXValue = '226px';
}
if(key == 4){
width = target.offsetWidth + "px";
translateXValue = '318px';
}
}
let linkBar = this.refs.linkBar as HTMLElement;
linkBar.style.width = width;
linkBar.style.transform = 'translateX(' + translateXValue + ")";
this.props.setRegionId(this.state.tabKey);
}
B组件接收redux中state的值:
componentDidUpdate(prevProps: IProps) {
console.log("componentDidUpdate__regionId:" + this.props.regionId);
if (this.props.regionId !== prevProps.regionId) {
this.getUpsList();
}
}
原因:A组件中this.setState({tabKey:key,})之后在this.props.setRegionId(this.state.tabKey)之前并没有真正意义上的给A组件中的state中的tabKey赋上值。setState所触发的一些方法的执行其实是个异步的执行过程。
上一篇: 九、组件间通信
下一篇: 最新版本rn调用安卓原生方法