2016-08-22 4 views
1

ReduxフォームとReactの使用データベースのユーザー情報を更新する明示的APIへの投稿要求を作成しています。しかし、これは完全に動作しますが、送信ボタンを押した後にインデックスページにリダイレクトされません。私のアプリケーションの他の場所では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 
    }; 
} 

答えて

3

updateUserは、したがって、あなたの.then()文を入力したことがない、あなたのAPI呼び出しから約束を返しません。私は働くことを考えると、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; 
} 
+0

残念ながら、動作しませんでした。私はミドルウェアとしてredux-promiseを使用していることに言及しなかった。私の理解は、それが私の約束を返すということです。あれは正しいですか?私は他の同様の機能を持っている、私は自分の仕事の機能を表示する私の元の投稿を編集します。 – JimmyWinestock

0

私はそれを理解しましたが、それは主にジェレミー氏の言葉通りでしたが、問題は私の明示的なAPIにありました。私はpostres.sendを入れることに失敗しました。助けてくれてありがとう。

関連する問題