沒有this.props裏面handleSubmit（）在反應

Question

我已經看過其他問題，沒有一個答案似乎有幫助。我沒有安裝Reduce-form。我是全新的反應（和相當新的dev下）

在我App.js我輸入：

import React, { Component } from 'react'; 
 
import { 
 
    BrowserRouter as Router, 
 
    Route, 
 
    Switch, 
 
    NavLink 
 
} from 'react-router-dom'

class App extends Component { 
 
    render() { 
 
    return (
 
     <Router> 
 
     <div className="App"> 
 
      <nav className="uk-navbar fixed"> 
 
      ... 
 
      </nav> 
 
      <Switch> 
 
      <Route exact path = "/" component={Home}/> 
 
      <Route path = "/tasks/new" component={AddTask}/> 
 
      ... more routes 
 
      </Route> 
 
      </Switch> 
 
     </div> 
 
     </Router> 
 
    ); 
 
    } 
 
} 
 

 
export default App;

我所有的表格（總共3個）都有一個handleOnSubmit，我有一個箭頭函數：

handleOnSubmit = (event) => { 
 
    event.preventDefault() 
 
    apiRequest.post(`projects/`, this.state) 
 
    this.props.router.push('/client'); 
 
    }

從形式存在的呼叫：

<form className="uk-form" onSubmit={this.handleOnSubmit}>

而且，我也沒有this.props我handleOnSubmit裏面，所以我不能再路由用戶。

以下是完整的錯誤：

TypeError: Cannot read property 'push' of undefined 
 
AddProject._this.handleOnSubmit 
 
src/components/projects/AddProject.js:20 
 
    17 | handleOnSubmit = (event) => { 
 
    18 | event.preventDefault() 
 
    19 | apiRequest.post(`projects/`, this.state) 
 
> 20 | this.props.router.push('/client'); 
 
    21 | } 
 
    22 | 
 
    23 | handleOnChange = event => { 
 
View compiled 
 
▼ 14 stack frames were expanded. 
 
Object../node_modules/react-dom/lib/ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback 
 
node_modules/react-dom/lib/ReactErrorUtils.js:69 
 
executeDispatch 
 
node_modules/react-dom/lib/EventPluginUtils.js:85 
 
Object.executeDispatchesInOrder 
 
node_modules/react-dom/lib/EventPluginUtils.js:108 
 
executeDispatchesAndRelease 
 
node_modules/react-dom/lib/EventPluginHub.js:43 
 
executeDispatchesAndReleaseTopLevel 
 
node_modules/react-dom/lib/EventPluginHub.js:54 
 
forEachAccumulated 
 
node_modules/react-dom/lib/forEachAccumulated.js:24 
 
Object.processEventQueue 
 
node_modules/react-dom/lib/EventPluginHub.js:254 
 
runEventQueueInBatch 
 
node_modules/react-dom/lib/ReactEventEmitterMixin.js:17 
 
Object.handleTopLevel [as _handleTopLevel] 
 
node_modules/react-dom/lib/ReactEventEmitterMixin.js:27 
 
handleTopLevelImpl 
 
node_modules/react-dom/lib/ReactEventListener.js:72 
 
ReactDefaultBatchingStrategyTransaction.perform 
 
node_modules/react-dom/lib/Transaction.js:143 
 
Object.batchedUpdates 
 
node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62 
 
Object.batchedUpdates 
 
node_modules/react-dom/lib/ReactUpdates.js:97 
 
dispatchEvent 
 
node_modules/react-dom/lib/ReactEventListener.js:147 
 
▲ 14 stack frames were expanded.

任何幫助是極大的讚賞。非常感謝！

我有super（），並且this.props.router.push和this.props.router.history都不起作用。

this.props在函數中根本不起作用。

這是我的整個組件 - 非常感謝！

import React, { Component } from 'react' 
 

 
import apiRequest from '../../redux/modules/apiRequests' 
 

 
export default class AddProject extends Component { 
 

 
    constructor(props){ 
 
    super(props) 
 
    this.state = { 
 
     name: '', 
 
     bill_rate: '', 
 
     clientId: this.props.clientId 
 
    } 
 
    } 
 
    
 
    handleOnSubmit = (event) => { 
 
    event.preventDefault() 
 
    apiRequest.post(`projects/`, this.state) 
 
    this.props.router.push('/client'); 
 
    } 
 

 
    handleOnChange = event => { 
 
    this.setState({ 
 
     [event.target.name]: event.target.value 
 
    }); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <form className="uk-form" onSubmit={this.handleOnSubmit}> 
 
      <fieldset> 
 
       <legend>Add Project</legend> 
 
       <div className="uk-form-row"> 
 
       <legend>Project Name</legend> 
 
       <input 
 
       type="text" 
 
       placeholder="Project Name" 
 
       name="name" 
 
       onChange={this.handleOnChange} /> 
 
       </div> 
 
       <div className="uk-form-row"> 
 
       <legend>Project Bill Rate</legend> 
 
       <input 
 
       type="text" 
 
       placeholder="Project Bill Rate" 
 
       name="bill_rate" 
 
       onChange={this.handleOnChange} /> 
 
       </div> 
 
       <input 
 
       type="hidden" 
 
       name={this.props.clientID} 
 
       /> 
 
       <input 
 
      type="submit" 
 
      value="Add Project" /> 
 
      </fieldset> 
 
     </form> 
 
     </div> 
 
    ); 
 
    } 
 
};

Answer 1

這不是直接回答你的錯誤，但陣營路由器V4有聲明替代：

import {Redirect} from 'react-router-dom'; 

// in render function 
this.state.shouldRedirect ? <Redirect to="redirect-url"/> : null 

// in method or somewhere else (lifecycle hooks etc) 
this.setState({shouldRedirect: true}); 

只要Redirect呈現，你會得到重定向。

Answer 2

我想你只需要與this.props.history.push()

Answer 3

更換this.props.router.push您需要添加構造

constructor(props){ 
super(props); 
} 

編輯： 添加此

App.contextTypes = { 
    router: PropTypes.object, 
}; 

然後，而不是this.props.router.push()嘗試

this.context.router.push()