Question

我有一个在用户单击UI中的删除记录时触发模式窗口的组件，但是问题是，生命周期方法componentDidUpdate第一次被调用一次。例如，如果我单击删除按钮，则在包含Modal组件的子组件中状态会更新，第一个组件触发后的所有其他操作都不会触发Modal显示。

这是我的代码：

import React, { Component } from 'react';
import { Button, Header, Icon, Modal } from 'semantic-ui-react';

class ConfirmationBox extends Component {
  state = { isOpen: false };
  componentDidMount() {
    this.setState({ isOpen: this.props.isOpen });
  }

  componentDidUpdate(prevProps, nextProps) {
    if (prevProps.isOpen !== this.props.isOpen) {
      this.setState({ isOpen: this.props.isOpen });
    }
  }

  closeConfirmation = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  onConfirmDelection = () => {
    this.closeConfirmation();
  };

  onCancelDelection = () => {
    this.closeConfirmation();
  };
  render() {
    return (
      <Modal open={this.state.isOpen} basic size='small'>
        <Header icon='delete' content='Confirmer suppression' />
        <Modal.Content>
          <p>Souhaitez-vous vraiment supprimer {this.props.names}?</p>
        </Modal.Content>
        <Modal.Actions>
          <Button onClick={this.onCancelDelection} basic color='red' inverted>
            <Icon name='remove' /> No
          </Button>
          <Button onClick={this.onConfirmDelection} color='green' inverted>
            <Icon name='checkmark' /> Yes
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }
}

export default ConfirmationBox;

Answer 1

您不必在状态和道具中存储isOpen。正确的唯一来源是正确的方法。例如，下一个方法是将isOpen存储在props中

import React, { Component } from 'react';
import { Button, Header, Icon, Modal } from 'semantic-ui-react';

class ConfirmationBox extends Component {
  onConfirmDelection = (data) => {
    const { closePopup, confirmDeletion } = this.props;

    closePopup();
    confirmDeletion(data);
  }

  render() {
    const { isOpen, closePopup, names } = this.props;

    return (
      <Modal open={isOpen} basic size='small'>
        <Header icon='delete' content='Confirmer suppression' />
        <Modal.Content>
          <p>Souhaitez-vous vraiment supprimer {names}?</p>
        </Modal.Content>
        <Modal.Actions>
          <Button onClick={closePopup} basic color='red' inverted>
            <Icon name='remove' /> No
          </Button>
          <Button onClick={this.onConfirmDelection} color='green' inverted>
            <Icon name='checkmark' /> Yes
          </Button>
        </Modal.Actions>
      </Modal>
    );
  }
}

export default ConfirmationBox;

Answer 2

在您的componentDidUpdate方法上，如果使用nextProps为何会有this.props参数

Answer 3

实际上，在触发closeConfirmation时，您不会在父组件中更新isOpen属性。它只是在ConfirmationBox状态下更新isOpen。这就是为什么prevProps.isOpen === this.props.isOpen，它们都为TRUE的原因。您应该将closeConfirmation移至父组件，并使用props中的isOpen。

使用componentDidUpdate更改道具后，组件不会更新

3 个答案: