Передача функции компоненту React и последующий ее вызов вызывает ошибку «Uncaught TypeError: x не является функцией» - PullRequest
Новая
       62

Передача функции компоненту React и последующий ее вызов вызывает ошибку «Uncaught TypeError: x не является функцией»

0 голосов
/ 05 мая 2020

Я пытаюсь отобразить Modal в React, и после вызова onClose он должен закрыться. У меня есть функция под названием showModal(): 

  showModal = () => {
    this.setState(prev=>({
      modalOpen: !prev.modalOpen
    }));
  };

И я привязываю ее в конструкторе: 

  constructor(props) {
    super(props);
    this.state = {
      ...
      modalOpen: false,
    };
    this.showModal = this.showModal.bind(this);
  }

В какой-то момент я вызываю свой Modal компонент: 

function = () => {
    ...
    return (
          <div {...attrs}>
            ...
              <div>
                <DocumentModal onClose={this.showModal} show={this.state.modalOpen} document = {documents[0].id} />
                <button onClick={() => {this.showModal()}}>{click me} &raquo;</button>
              </div>
              }
            </div>
          </div>
        );
}

А вот компонент Modal: 

class DocumentModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: this.props.document,
    };
  }

  ...

  render() {
    const modalStyles = {
      modal: {
        minWidth: '400px',
        padding: '2rem',
      }
    };

    if (!this.props.show) {
      return null;
    }

    return (
      <div>
        <Modal open={this.props.show} little showCloseIcon={true} styles={modalStyles}>
          <div className="item">
            ...
            <button type="button" className="close" aria-label="Close"
                    onClick={() => {this.props.onClose()}}/>
          </div>
        </Modal>
      </div>
    );
  }
}

Modal.propTypes = {
  onClose: PropTypes.func.isRequired,
  show: PropTypes.bool,
  document: PropTypes.string,
};

export default DocumentModal;

При нажатии на кнопку close внутри Modal я получаю следующую ошибку: 

Uncaught TypeError: n.props.onClose is not a function
    at n.onClickCloseIcon (modal.js:66)
    at Object.c (react-dom.production.min.js:26)
    at Object.invokeGuardedCallback (react-dom.production.min.js:25)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.production.min.js:25)
    at p (react-dom.production.min.js:30)
    at b (react-dom.production.min.js:32)
    at y (react-dom.production.min.js:32)
    at Array.forEach (<anonymous>)
    at v (react-dom.production.min.js:31)
    at S (react-dom.production.min.js:34)

Возможно, стоит упомянуть, что существует несколько элементов, для которых отображается Modal. Например, 5 разных элементов с 5 разными ID's, но метод onClose по-прежнему одинаков для всех.

Что я делаю не так?

1 Ответ

1 голос
/ 05 мая 2020

Вы должны добавить onClose в свой модальный компонент 

<Modal open={this.props.show} little showCloseIcon={true} styles={modalStyles} onClose={this.props.onModalClose}> //rename your prop function to onModalClose//
...