Question

使用Redux表单和React我正在向更新数据库中的用户信息的快速API发出请求。这很好用，但是，在按下提交按钮后，它无法将我重定向到索引页面。在我的应用程序的其他地方this.context.router.push('/')已经有效但不在这里。

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
  };
}

Answer 1

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;
}

Answer 2

我想出来了，这很大程度上就像杰里米所说，但问题出在我的快速API上。我没有在res.send中加post。谢谢你的帮助。

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

2 个答案: