Question

我已经查看了其他问题，但没有一个答案似乎有所帮助。我没有安装redux-form。我是全新的反应（也是开发人员的新手）

在我的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}>

而且，我的handleOnSubmit中没有this.props，所以我无法重新路由用户。

以下是完整错误：

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

我认为您只需要将onDeleteClientRow: function(oEvent) { jQuery.sap.log.info("Clients.onDeleteClientRow() called"); var oRow = oEvent.getParameter("row"); var oItem = oEvent.getParameter("item"); var oView = this.getView(); var oName = oView.getModel().getProperty("name", oRow.getBindingContext()); MessageToast.show("Action " + (oItem.getText() || oItem.getType()) + " pressed for client: " + oName); }替换为this.props.router.push

Answer 2

这不是您的错误的直接答案，但React Router 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 3

您需要添加构造函数

constructor(props){
super(props);
}

编辑：添加此

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

然后代替this.props.router.push()尝试

this.context.router.push()

没有this.props里面的handleSubmit（）反应

3 个答案: