尝试使用 this.props.history.push 但 this.props 返回一个空对象

Question

var React = require('react')
var axios = require('axios')
var config = require('../../apiKeys')
var ReactRouter = require('react-router-dom')
var Router = ReactRouter.BrowserRouter;
var Route = ReactRouter.Route;
var Forecast = require('./Forecast');

class Header extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      city: null,
      weatherData: []
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  };
  handleChange(e) {
    e.preventDefault();
    let input = e.target.value.split(' ,')[0];
    this.setState(function() {
      return {
        city: input
      }
    });
  };

  handleSubmit(e) {
    e.preventDefault();
    city = this.state.city

    function getCurrentWeather(city) {
      return axios.get("http://api.openweathermap.org/data/2.5/weather?q="+ city + `&type=accurate&APPID=${config.apiKey}`)
        .then(function(response) {
          return(response.data)
        })
      };

    function getFiveDayForecast(city) {
      return axios.get("http://api.openweathermap.org/data/2.5/forecast?q=" + city + `,us&mode=XML&APPID=${config.apiKey}&cnt=5`)
        .then(function(response) {
          return(response.data)
        })
      };
    axios.all([getCurrentWeather(city), getFiveDayForecast(city)])
      .then(axios.spread((currentWeatherResponse, fiveDayResponse) => {
        this.setState({ weatherData: [...this.state.weatherData, currentWeatherResponse] })
        this.setState({ weatherData: [...this.state.weatherData, fiveDayResponse]})
      }))
      .then(() => {
        this.props.history.push({
          pathname: '/forecast',
          search: `?forecast?city=${this.state.city}`,
          state: {
              data: this.state.weatherData}
        })
      });
    };

  render() {

    console.log(this.props.children)
    return(
      <Router>
        <div className="header-style">
          <p className="header-content-style"> Weather React App! </p>
          <div className="search-header">
            <form className="header-form" onSubmit={this.handleSubmit}>
              <input
                className="header-input-form"
                id="location"
                placeholder="City & State"
                type="text"
                autoComplete="off"
                onChange={this.handleChange}/>
              <button
                className="header-bar-button"
                type="submit"
                >
                Get Weather
              </button>
            </form>
          </div>
        </div>
      </Router>
    )
  }
}


module.exports = Header



var React = require('react')
var ReactDOM = require('react-dom')
require('./index.css')
var Home = require('./component/Home')
var ReactRouter = require('react-router-dom')
var Router = ReactRouter.BrowserRouter;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link
var Forecast = require('./component/Forecast')
var Interval = require('./component/Interval')

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Route exact path="/" component = {Home} />
          <Route path="/forecast" component={Forecast} />
          <Route path="/detail/:interval" component = {Interval} />
        </div>
      </ Router>
    )
  }
};


ReactDOM.render(
  <App />,
  document.getElementById("app")
);

我有一个标题组件，它有一个按城市和州搜索的表单。表单 onSubmit 触发一个事件函数，该函数具有几个用于 api 调用的函数声明和一个封装到 axios.all 中的 api 调用的函数调用。然后将响应设置为我的 this.state，然后有一个 this.props.history.push 函数来渲染新的组件和路由。在 console.log 上，我的 this.props 是一个空对象，我不能在 undefined 上调用 .history.push。

当我在另一个实际上有 this.props.history 的组件中做了一些类似的事情时，我试图弄清楚为什么 this.props 在这个特定的组件中是空的。顶部代码来自我的 Header 组件，底部是我的 index.js 文件

请看一下。

Answer 1

要在您的props 中获得history，您需要component wrapped 向上withRouter

module.exports = withRouter(Header);

withRouter 负责查找 Router 并将所有相关的 props 传递给您的组件。