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