嘗試使用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為空，而我在另一個實際具有this.props.history的組件中做了一些類似的事情。 頂部的代碼來自我的Header Component，底部的是我的index.js文件

請看一下。

Answer 1

要獲取props history ，您需要使用withRouter 包裹組件

module.exports = withRouter(Header);

withRouter負責查找Router並將所有相關道具傳遞給您的組件。