Как отредактировать getDerivedStateFromProps и отправить избыточное действие

Question

componentWillReceiveProps в качестве жизненного цикла предупреждения после реакции версии 16.3, я обновляю старую версию до 16.4.2

Ниже приведены общие практики, которые я использовал в старой версии.

Действия при получениив цикле componentWillReceiveProps и вызовите функцию этого редуцирующего действия this.props.xxxxActionsCreator для управления самим собой и обновлениями других компонентов, но после 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

Поскольку вы не можете получить доступ к this в методе static getDerivedStateFromProps, вам придется сохранить или вернуть состояние, выполнив что-то вроде 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;
        }
   }