反应生命周期组件WillReceiveProps 如何更改 getDerivedStateFromProps 然后发送 redux 动作

Question

componentWillReceiveProps 作为 react 16.3 版本后的警告生命周期，我正在将旧版本更新到 16.4.2

以下是我在旧版本中使用的常见做法。

在componentWillReceiveProps循环中接收action，调用this.props.xxxxActionsCreator的函数dispatch redux action来驱动自己和其他组件更新，但是16.3之后getDerivedStateFromProps是静态的，不能调用this。

请问如何更新的做法最合适？

import React from 'react';
import PropTypes from 'prop-types';
import Modal from 'antd/lib/modal';
import * as DeleteDialogActions from '../Actions/DeleteDialogActions';

export default class DeleteDialogView extends React.Component {
    constructor() {
        super();
        this.state = {
            showDialog: false
        };
    }

    componentWillReceiveProps(nextProps) {
        switch (nextProps.actionType) {
            case DeleteDialogActions.SHOW_DELETE_DIALOG:
            case DeleteDialogActions.HIDE_DELETE_DIALOG:
                this.showDialog();
                break;
            case DeleteDialogActions.DELETE_ITEM_SUCCESS:
                this.props.DeleteDialogActionsCreator.updateDialog();
                break;

            default:
                break;
        }
    }

    showDialog = () => {
        this.setState({showDialog: !this.state.showDialog});
        this.props.DeleteDialogActionsCreator.updateDialog();
    };

    handleOk = () => {
        this.props.DeleteDialogActionsCreator.doDeleteItem(this.props.deleteItemId);
        this.setState({showDialog: false});
    };

    handleCancel = () => {
        this.setState({showDialog: false});
    };

    render() {
        return (
            <div>
                <Modal
                    title="Delete"
                    visible={this.state.showDialog}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    className="delete-dialog"
                >
                    <p>Are you sure you want to delete the item with device ID {this.props.deleteItemId} ?</p>
                </Modal>
            </div>
        );
    }
}

DeleteDialogView.defaultProps = {
    deleteItemId: 0
};

DeleteDialogView.propTypes = {
    actionType: PropTypes.string.isRequired,
    deleteItemId: PropTypes.number.isRequired,
    DeleteDialogActionsCreator: PropTypes.object.isRequired,
};

Answer 1

由于您无法在 static getDerivedStateFromProps 方法中访问 this，因此您必须通过类似 return { showDialog: true }; 的操作来存储或返回状态，这相当于 this.setState({showDialog: true})。所以你可以检查componentDidUpdate生命周期方法中的状态，只有当getDerivedStateFromProps返回一个非空值时才会触发。

  componentDidUpdate(prevProps, prevState) {
     if(this.state.showDialog){
           this.showDialog();
      }
     if(this.state.updateDialog){
      this.props.DeleteDialogActionsCreator.updateDialog();
     }
  }




   getDerivedStateFromProps(nextProps, prevState) {
          switch (nextProps.actionType) {
            case DeleteDialogActions.SHOW_DELETE_DIALOG:
            case DeleteDialogActions.HIDE_DELETE_DIALOG:
                 return { showDialog: true };
                break;
            case DeleteDialogActions.DELETE_ITEM_SUCCESS:
                 return { updateDialog: true };
                break;
            default:
                 return null;
                break;
        }
   }