在提交React/Redux後重新路由到索引

使用Redux表單和React我正在向一個快速API發出一個post請求，用於更新數據庫中的用戶信息。這完美的工作，但是，它沒有按下提交按鈕後，我重定向到索引頁面。在我的應用this.context.router.push('/')的其他地方已經工作，但不在這裏。在提交React/Redux後重新路由到索引

import React, { Component, PropTypes } from 'react'; 
import { reduxForm } from 'redux-form'; 
import { updateUser } from '../actions/index'; 
import { Link } from 'react-router'; 

class UsersUpdate extends Component { 
    static contextTypes = { 
    router: PropTypes.object 
    }; 


    onSubmit(props) { 
    this.props.updateUser(props, this.props.params.id) 
    .then(() => { 
     this.context.router.push('/'); 
    }); 
    } 


    render() { 
    const { fields: { name, email, day }, handleSubmit } = this.props; 
    return(
     <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
     <h3>Update User</h3> 
     <div className={`form-group`}> 
      <label>Name</label> 
      <input type="text" className="form-control" {...name}/ > 
     </div> 

     <div className={`form-group`}> 
      <label>email</label> 
      <input type="text" className="form-control" {...email}/ > 
     </div> 

     <div className={`form-group`}> 
      <label>day</label> 
      <input type="text" className="form-control" {...day}/ > 
     </div> 

     <button type="submit" className="btn btn-primary">Submit</button> 
     <Link to="/" className="btn btn-danger">Cancel</Link> 
     </form> 
    ); 
    } 
} 


export default UsersUpdate = reduxForm({ 
    form: 'UsersUpdateForm', 
    fields: ['name', 'email', 'day'] 
}, null, { updateUser })(UsersUpdate);

這裏是我的UpdateUser兩個功能：

export function updateUser(props, id) { 
    const request = axios.post(`${ROOT_URL}/users/${id}`, props); 
    return { 
    type: UPDATE_USER, 
    payload: request 
    }; 
}

我知道這可能是一個愚蠢的錯誤，但我已經花了太長時間找過來吧！任何幫助將非常感激。

這是我的應用程序中與this.context.router.push('/')一起使用的功能。

export function createUser(props) { 
    const request = axios.post(`${ROOT_URL}/users/newUser`, props); 
    return { 
    type: CREATE_USER, 
    payload: request 
    }; 
}

來源

2016-08-22 JimmyWinestock

updateUser不會從你的API調用返回一個承諾，因此你永遠不會進入你的.then()聲明。我認爲，要工作updateUser必須返回請求，只是簡單地派遣或類似的東西。無論如何，您必須返回您的API調用承諾。

export function updateUser(props, id) { 
    const request = axios.post(`${ROOT_URL}/users/${id}`, props); 
    return (dispatch) => { 
     dispatch ({ 
     type: UPDATE_USER, 
     payload: request 
     }; 
     return request; 
}

來源

2016-08-22 08:08:17

不幸的是，它沒有奏效。我忘了提及我正在使用redux-promise作爲中間件。我對此的理解是它返回了我的承諾。那是對的嗎？我還有其他類似的功能，我將編輯我的原始帖子以顯示我的工作功能。 – JimmyWinestock

我想出來了，主要是Jeremy說的，但問題出在我的快速API上。我沒有把res.send放入我的post。謝謝您的幫助。

來源

2016-08-24 04:18:14 JimmyWinestock

在提交React/Redux後重新路由到索引

回答

相關問題