Reactjs React生命周期挂钩不适用于redux状态更新
我正在使用react-with-typescript和react-redux包 是否按照文档中的配置组件- console.log正在使用连接功能,但组件生命周期不工作 集装箱Reactjs React生命周期挂钩不适用于redux状态更新,reactjs,redux,react-redux,Reactjs,Redux,React Redux,我正在使用react-with-typescript和react-redux包 是否按照文档中的配置组件- console.log正在使用连接功能,但组件生命周期不工作 集装箱 从“/Toolbar.Component”导入工具栏; 导出默认连接((存储:任意)=>{ console.log('++++++++++',store.toolbarComponent); 返回store.toolbar组件 },{}(工具栏)``` 组件技术 导出默认类ToolbarComponent扩展React
从“/Toolbar.Component”导入工具栏;
导出默认连接((存储:任意)=>{
console.log('++++++++++',store.toolbarComponent);
返回store.toolbar组件
},{}(工具栏)```
组件技术
导出默认类ToolbarComponent扩展React.Component{
建造师(道具:道具){
超级(道具);
此.state={
activeProperty:“”,
工具栏列表:this.props.toolbarList
};
log('--compinit---',this.state);
this.dispatchData=this.dispatchData.bind(this);
}
不安全的组件将更新(){
console.log('----',this.props.toolbarList,this.state.toolbarList)
}
componentWillUpdate(){
console.log('----',this.props.toolbarList,this.state.toolbarList)
}
组件将接收道具(){
console.log('----',this.props.toolbarList,this.state.toolbarList)
}
componentDidUpdate(){
console.log('----',this.props.toolbarList,this.state.toolbarList)
}
}
尝试使用扩展运算符
import Toolbar from './Toolbar.Component';
export default connect<any, any, any>((store:any) => {
return { ...store.toolbarComponent } <-- Here
}, {})(Toolbar)
从“/Toolbar.Component”导入工具栏;
导出默认连接((存储:任意)=>{
返回{…store.toolbarComponent}store.toolbarComponent
的值是多少?是否有控制台错误?
export default class ToolbarComponent extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
activeProperty: '',
toolbarList: this.props.toolbarList
};
console.log('--- comp init ---', this.state);
this.dispatchData = this.dispatchData.bind(this);
}
UNSAFE_componentWillUpdate(){
console.log('-----', this.props.toolbarList, this.state.toolbarList)
}
componentWillUpdate(){
console.log('-----', this.props.toolbarList, this.state.toolbarList)
}
componentWillReceiveProps(){
console.log('-----', this.props.toolbarList, this.state.toolbarList)
}
componentDidUpdate(){
console.log('-----', this.props.toolbarList, this.state.toolbarList)
}
}
import Toolbar from './Toolbar.Component';
export default connect<any, any, any>((store:any) => {
return { ...store.toolbarComponent } <-- Here
}, {})(Toolbar)