Question

componentWillReceiveProps作为反应版本16.3之后的警告生命周期，我将旧版本更新为16.4.2

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

在componentWillReceiveProps中接收动作并循环调用此函数。props.xxxxActionsCreator调度redux动作来驱动自身和其他组件更新，但是16.3之后，getDerivedStateFromProps是静态的，无法调用它。

我想问一下如何更新实践最合适？

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 this方法内访问getDerivedStateFromProps，因此必须执行return { showDialog: true };之类的操作来存储或返回状态到this.setState({showDialog: true})。因此，您可以使用componentDidUpdate生命周期方法检查状态，该状态仅在getDerivedStateFromProps返回的值不为null时才会触发。

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

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

1 个答案: