Ошибка типа: this.props не является функцией (реагирует маршрутизатор / коммутатор)

Question

В приложении есть переключатель. js для рендеринга различных компонентов тела. «Посадка» - это компонент тела целевой страницы. У него есть текстовое поле для ввода почтового индекса, и когда вы нажимаете кнопку отправки, он отображает компонент тела страницы «События», который отображает некоторые данные.

Когда загружается компонент «События», он должен быть Я получил доступ к почтовому индексу, который пользователь ввел на странице Landing, поэтому я поднял zip в App. js, который является родителем Landing и Events.

Я использую Route and Switch так что я могу сделать разные компоненты тела. Хотя это не так уж далеко:

TypeError: this.props.onZipChange не является функцией

Понятия не имею, почему он не распознает onZipChange как функцию в приложении . js. Я не буду показывать файл Events. js, потому что он даже не отображается до того, как я получу TypeError. Во-вторых, я пытаюсь ввести в поле ввода в Landing. js, он вызывает атрибут onChange поля ввода, который вызывает this.handleChangeZip, который пытается вызвать функцию App. js 'onZipChange через this.props, который не признавая

Есть мысли?

Приложение. js:

import React, { PropTypes, Component } from "react";
import "./styles/bootstrap/css/bootstrap.min.css";
import "./styles/App.css";
import "./index.css";
import Header from "./routes/Header";
import Body from "./routes/Body";
import { Switch, Route, NavLink } from "react-router-dom";
import Landing from "./routes/Landing";
import Events from "./routes/Events";
import Help from "./routes/Help";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { zip: "" };
    this.handleZipChange = this.handleZipChange.bind(this);
  }

  handleZipChange = newZip => {
    this.setState({ zip: newZip });
  };

  render() {
    const currZip = this.state.zip;

    return (
      <div className="App">
        <Header zip={currZip} />
        <Switch>
          <Route
            exact
            path="/"
            render={props => <Landing {...props} zip={currZip} />}
            onZipChange={this.handleZipChange}
          />
          <Route
            exact
            path="/Events"
            render={props => <Events {...props} zip={currZip} />}
            onZipChange={this.handleZipChange}
          />
          <Route exact path="/Help" component={Help}></Route>
        </Switch>
      </div>
    );
  }
}

export default App;

Посадка. js:

import { Redirect } from "react-router-dom";
import React from "react";
import "../styles/App.css";

class Landing extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "", toEvents: false };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChangeZip = this.handleChangeZip.bind(this);
  }

  handleChangeZip(e) {
    this.props.onZipChange(e.target.value);
  }

  handleSubmit(event) {
    this.setState(() => ({
      toEvents: true
    }));
    event.preventDefault();
  }

  render() {
    if (this.state.toEvents === true) {
      return <Redirect to="/Events" />;
    }

    return (
      <div>
        <div className="main-body">
          <div className="main-question" id="thisfontonly">
            What city are you looking for?
          </div>
          <div className="textbar-and-button">
            <input
              onChange={this.handleChangeZip}
              value={this.props.zip}
              type="text"
              name="city"
              id="citylabel"
              style={{ fontSize: "24pt" }}
              className="rcorners"
            />
            <div className="buttons">
              <input
                onClick={this.handleSubmit}
                type="submit"
                name="submit"
                value="Go!"
                id="submit"
                className="button"
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Landing;