Получение ошибки как: TypeError: Невозможно прочитать свойство 'location' из неопределенного - PullRequest
Новая
       14

Получение ошибки как: TypeError: Невозможно прочитать свойство 'location' из неопределенного

0 голосов
/ 09 января 2019

Ниже приведен фрагмент кода из App.js, который включает компонент Navigator: 

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Router>
        <div>
          <HeaderAmex className="App" />
          <div>
            <Navigation/>
          </div>
          <Route exact path="/invoice" component={Invoice} /> 
        </div>
      </Router>
    );
  }
}

export default withRouter(App)

Мой компонент навигации выглядит следующим образом. Это получает местоположение как собственность: 

class Navigation extends Component {
  render() {
    const { match, location, history } = this.props

    return (
      <Router>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>    
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mr-auto">
              <NavDropdown name="Test">
                <a className="dropdown-item" >                  
                  <li><Link to={"/Invoice"} >Mexico Invoice</Link></li>
                </a>
              </NavDropdown>
              <NavDropdown name="Analysis">
                <a className="dropdown-item" href="/Transaction">Audit Log</a>
              </NavDropdown>
            </ul>
            <Route exact path="/Invoice" component={Invoice}  />
          </div>
        </nav>
      </Router>
    );
  }
}

export default withRouter(Navigation)

Ниже приведен код из Invoice.js 

render() {
  const { match, location, history } = this.props
  console.log("---------------------------"+this.state.invoicedisplayFlag);
  return (
    <div className="App">
      <br/>
      <label className="lable" style={{marginRight:19}}>
        InvoiceXml:
        <input
          type="text"
          name="invoiceXml"
          placeholder="Enter invoice xml"
          onBlur={this.handleChangeInvoice.bind(this)}
          style={{marginLeft:15}}
        />
      </label>
      <br/>
      <input
        type="button"
        onClick={this.handleSubmitInvoiceXml}
        name="Submit"
        value="Submit"
        className="submitButton"
        style={{marginLeft:-60}}
      />
      <br/>
      <div className={this.state.invoicedisplayFlag ? "showDisplay" : "hide"}>
        <h5>Transaction Id is :{this.state.invoiceTransId}</h5>
      </div>
    </div>
  );
}

Я получаю ошибку:

"TypeError: Cannot read property 'location' of undefined" at Router.js:66

Я пробовал несколько подходов, перечисленных для этой проблемы, но ничего не помогло. Кто-нибудь может помочь мне в этом же?

1 Ответ

0 голосов
/ 09 января 2019

Добро пожаловать в stackoverflow,

Я не уверен, правильно ли я понимаю вашу проблему, так как вы в основном показываете код, но ничего конкретного о ситуации или месте, где возникает ваша ошибка.

Я вижу, что вы передаете свой компонент Invoice в маршрут через свойство component. После прочтения этого поста на github кажется, что с response-router v4 вы должны использовать свойство render для передачи реквизитов вместе с вашим компонентом.

Итак, в основном вы должны сделать следующее:

  1. Создание функции, которая принимает реквизиты в качестве параметра и возвращает компонент Invoice с нужными реквизитами

  2. Измените <Route exact path="/Invoice" component={Invoice} /> на <Route exact path="/Invoice" render={MyInvoiceFunction} /> в Navigator.js

  3. Не забудьте предоставить дополнительную информацию и хорошо отформатированный код для вашего следующего вопроса;)

Надеюсь, это решит вашу проблему

EDIT:

Вам нужно добавить функцию в ваш Invoice.js, чтобы она понравилась: 

export const MyInvoiceFunction = (props) => {
  return (
    <Invoice match={this.match.bind(this)} location={this.location.bind(this)} {...props} />
  );
};
...