Question

我正在尝试构建一个简单的工作板，即ReactJS的前端。

我已经使用github作业API将我的API数据提取到ComponentDidMount中。

我在表单上有一个handleChange，当我输入求职关键字时，它会返回求职结果。例如“纽约”中的“开发人员”职位。
全部都可以。

在提交时，我想将数据推送到新页面-“工作结果”。就像您在普通工作网站上看到的一样。输入工作搜索，结果将加载到新页面上。

我正在尝试使用this.props.history.push推送我存储在set中的位置数据，并将其返回到带有“ / jobresults” URL的页面。

这不起作用。我没有收到错误。什么都没有发生，我的页面保持原样。

我在做什么错？这是我的app.js代码。

谢谢，里纳（Reena）

import React from 'react';
import axios from 'axios';
import ReactDOM from 'react-dom';
import Header from './components/Header';
import Navbar from './components/Navbar';

import Jobs from './components/Jobs';
import HomePageResults from './components/HomePageResults';
import JobResults from './components/JobResults';
import JobDescription from './components/JobDescription';
import ApplyNow from './components/ApplyNow';
import Confirmation from './components/Confirmation';
import './assets/scss/main.scss';

import { BrowserRouter, Route, Switch } from 'react-router-dom';



class App extends React.Component {

  constructor() {
    super();
    console.log('CONSTRUCTOR');

    this.state = {
      jobs: [],
      searchData: '',
      cityData: 'new york',
      locations: []
    };
  }



  // FUNCTION TO CALL API IS WORKING
  componentDidMount() {
    console.log('Component Did Mount: WORKING');
    axios.get('https://jobs.github.com/positions.json?search=')

      .then(res => {
        console.log(res.data.slice(0,4));
        this.setState({ jobs: res.data.slice(0,4) });
      });
  }


  // HANDCHANGE FOR JOB SEARCH
  handleChange = (e) => {
    console.log(e.target.value);
    this.setState({ searchData: e.target.value });
  }


  // HANDLE CHANGE FOR LOCATION SEARCH
  handleChangeLocation = (e) => {
    console.log('location', e.target.value);
    this.setState({ cityData: e.target.value });
  }


  // HANDLE SUBMIT
  handleSubmit = (e) => {
    e.preventDefault();
    console.log(this.state.searchData);
    axios.get(`https://jobs.github.com/positions.json?description=${this.state.searchData}&location=${this.state.cityData}`)


      .then(res => {
        this.setState({ locations: res.data });
        console.log('location data', this.state.locations);
      })
      .then(() => this.props.history.push('/jobresults'));
  }



  render() {
    return(


      <main>
        <BrowserRouter>
          <section>
            <Navbar />

            <Switch>
              <Route path="/jobs" component={Jobs} />
              <Route path="/jobresults" component={JobResults} />
              <Route path="/jobdescription" component={JobDescription} />
              <Route path="/apply" component={ApplyNow} />
              <Route path="/confirmation" component={Confirmation} />
            </Switch>

            <Header
              handleChange={this.handleChange}
              handleChangeLocation={this.handleChangeLocation}
              handleSubmit={this.handleSubmit}
            />
            <HomePageResults jobs={this.state.jobs}/>
          </section>
        </BrowserRouter>

      </main>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Answer 1

route props仅在给Route组件提供的组件中可用，因此您不能在this.props.history组件中使用App。

您可以改为手动创建history对象，并将其分配给Router，这样便可以在您认为合适的地方使用history对象。

import { Router, Route, Switch } from "react-router-dom";
import createHistory from "history/createBrowserHistory";

const history = createHistory();

class App extends React.Component {
  // ...

  handleSubmit = e => {
    e.preventDefault();
    axios
      .get(
        `https://jobs.github.com/positions.json?description=${
          this.state.searchData
        }&location=${this.state.cityData}`
      )
      .then(res => {
        this.setState({ locations: res.data });
        history.push("/jobresults");
      })
      .catch(error => console.log(error));
  };

  render() {
    return (
      <main>
        <Router history={history}>{/* ... */}</Router>
      </main>
    );
  }
}

重定向到提交页面：this.props.history.push

1 个答案: