Uncaught TypeError: Невозможно прочитать свойство 'bind' из неопределенного, но я связал метод, и он не является неопределенным в консоли - PullRequest
Новая
       10

Uncaught TypeError: Невозможно прочитать свойство 'bind' из неопределенного, но я связал метод, и он не является неопределенным в консоли

0 голосов
/ 09 июля 2019

Посмотрев на подобные вопросы, которые люди задавали здесь, я обнаружил, что люди сталкивались с опечатками или забыли связать метод в своем конструкторе.Однако я не нашел никаких опечаток, и когда я пытаюсь связать метод с именем console.log в конструкторе, он не является неопределенным, фактически он возвращает только функцию, которую я ищу, чтобы связать.

В моем компоненте я создаю переключающую кнопку редактирования, которая, когда пользователь нажимает кнопку «редактировать», он сначала сталкивается с модальным, который проведет его через шаги для проверки безопасности.Этот метод обновляет состояние, в частности, один реквизит, называемый «показанный», и когда он обновляется, показанный реквизит передается другому компоненту (для модального), который всплывает, когда показывается значение true.Если пользователь преодолевает защитные барьеры, то для editMode устанавливается значение true, что открывает поля, которые можно редактировать, а затем показывать, будет установлено значение false, поскольку модал после прохождения шагов безопасности не требуется.Как я уже говорил ранее, я не могу понять, почему он говорит мне, что toggleEditMode не определен, потому что при регистрации в конструкторе он не возвращает undefined.

Я пытался изменить его на this.toggleEditMode = toggleEditMode.bind(this), но, как я и ожидал, это тоже не сработало.

import React, { Component } from 'react';
import Name from '../../Common/FormFields/Name';
import BusinessAddress from '../../Common/FormFields/BusinessAddress';
import PhoneNumber from '../../Common/FormFields/PhoneNumber';
import EditModal from ‘../../EditModal';
import EditingToggleButton from '../../Common/EditingToggleButton';

class BusinessInformation extends Component {
  constructor(props) {
    super(props);
    this.state = this.getInitialState(props);

    console.log(‘toggleEditMode’, this.toggleEditMode)
    //this returns the function I have below and not undefined in the console
    this.toggleEditMode = this.toggleEditMode.bind(this);
    this.cancelEdit = this.cancelEdit.bind(this);
    this.authHandler = this.authHandler.bind(this);
  }


  getInitialState(props) {
    return {
      editMode: false,
      shown: false,
      form: {
        phone: {
          value: “555-555-5555”,
          valid: true,
        },
        address: {
          value: “123 Main St”,
          valid: true,
        },
        city: {
          value: “Springfield”,
          valid: true,
        },
        state: {
          value: “RI”,
          valid: true,
        },
        zip: {
          value: “11111”,
          valid: true,
        },
      },
    };
  }

  toggleEditMode() {
    this.setState({editMode: true, shown: true})
  }

  authHandler(response) {
    switch(response.status) {
      case 0:
        console.log('no auth needed', response)
        this.setState({ editMode: true, shown: false });
      case 1:
        console.log('passed all verifications’, response)
        this.setState({ editMode: true, shown: false });
      case 100: 
        console.log(‘there was an error, inspect response.errorCode’)
        this.setState({ editMode: false, shown: false });
      case 101:
        console.log('interrupted by user’)
        this.setState({ editMode: false, shown: false });
    }
  }

  cancelEdit() {
    this.setState(this.getInitialState(this.props));
  }

  render() {
    const {
      editMode,
      shown,
    } = this.state;

    return (
      <div className="pad-4-l-md-up">
          <div className="row pad-4-b">
          <div className="col-md-8 col-xs-12">
          <EditModal
             onClose={onClose}
             authHandler={authHandler}
             shown={shown}
       />
            <Name
              width="col-md-5 col-xs-4"
            />
            <PhoneNumber
              editMode={editMode}
              handleChange={this.handleChange}
              labelWidth="col-md-5 col-xs-4"
              inputWidth="col-md-6 col-xs-8"
            />
            <BusinessAddress
              editMode={editMode}
              handleChange={this.handleChange}
              labelWidth="col-md-5 col-xs-4"
              inputWidth="col-md-6 col-xs-8"
            />
          </div>
          <div className="col-md-4 col-xs-12">
            <EditingToggleButton
              editMode={editMode}
              toggleEditMode={this.toggleEditMode}
            />
          </div>
        </div>
      </div>
    );
  }
}

export default BusinessInformation;

Компонент для EditingToggleButton выглядит следующим образом: 

import React, { Fragment } from 'react';

const EditingToggleButton = ({ editMode, toggleEditMode }) => (
  (editMode) ? ''
   : (
    <Fragment>
      <a
        id="editingToggleButton"
        className="display-block text-align-center-sm-down"
        role="button"
        href="javascript:void(0);"
        onClick={toggleEditMode}
        onKeyDown={toggleEditMode}
      >
        <span className="icon icon-sm dls-icon-edit" />
      </a>
    </Fragment>
  )
);

export default EditingToggleButton;

При попытке отрисовки всего в браузере я сталкиваюсь с ошибкой Uncaught TypeError: Cannot read property 'bind' of undefined, конкретно относящейся к toggleEditMode в источниках внутрибраузер Google Chrome.

1 Ответ

0 голосов
/ 09 июля 2019

Вы пробовали ES6 способ связывания handler functions?

Например: 

toggleEditMode = () => {
this.setState({editMode: true, shown: true})

}

и позже 

<EditingToggleButton
          editMode={editMode}
          toggleEditMode={()=>this.toggleEditMode()}
        />
...