React 生命周期钩子不适用于 redux 状态更新

问题描述

我正在使用 react 与 typescript 和 react-redux 包.

确实像文档中那样配置组件 - https://react-redux.js.组织/介绍/快速入门

console.log 正在处理连接功能，但组件生命周期不起作用.

容器.ts

从'./Toolbar.Component'导入工具栏；export default connect((store:any) => {console.log('++++++++++++++++++++',store.toolbarComponent);返回 store.toolbarComponent}, {})(工具栏)```

component.ts

export default class ToolbarComponent extends React.Component{构造函数(道具:道具){超级(道具)；this.state = {活动属性:'',工具栏列表: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)}}

解决方案

尝试使用展开运算符

从'./Toolbar.Component'导入工具栏；export default connect((store:any) => {return { ...store.toolbarComponent } <-- 这里}, {})(工具栏)

说明 - 组件钩子没有检测到 store.toolbarComponent 对象的变化，传播运算符克隆 store.toolbarComponent 对象并传递克隆的版本.

I'm using react with typescript and react-redux package.

did configure component as in documentations - https://react-redux.js.org/introduction/quick-start

console.log is working on connect function but component lifecycle not working.

import Toolbar from './Toolbar.Component';


export default connect<any, any, any>((store:any) => {
    console.log('++++++++++++++++++++',store.toolbarComponent);
    return store.toolbarComponent
}, {})(Toolbar)```

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)
    }
}

解决方案

try with the spread operator

import Toolbar from './Toolbar.Component';

export default connect<any, any, any>((store:any) => {
    return { ...store.toolbarComponent }  <-- Here
}, {})(Toolbar)

Explanation - Component hooks is not detecting changes in store.toolbarComponent object and spread operator clone the store.toolbarComponent object and pass the cloned version.

这篇关于React 生命周期钩子不适用于 redux 状态更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！