Question

我有一个使用axios的React / Redux应用程序向快速后端发出请求。

我正在尝试将表单提交到后端路由/api/patients/outcomes/:id-其中:id是表单数据所属的特定患者的MongoDB ID。在后端，路由会将表单数据添加到患者对象上的“结果”数组中。

我无法将:id放入onSubmit函数中。呈现具有表单的组件时，我在Redux中有一个patients对象，其中包含来自数据库的患者信息；组件加载时的Redux状态如下：

Redux state
|
|-- patients
|   |-- patients [list of all patients - irrelevent to this component]
|   +-- patient {patient object}
|       |-- _id 
|       |-- name
|       +-- contactInfo {object with contact info}
|
|-- auth
|   |-- isAuthenticated
|   +-- user
|
+-- errors

我具有对道具的映射状态，我已将患者对象从道具中拉出，在调用中绑定了onSubmit函数，并将patient._id传递给了bind()，但是它不会携带到onSubmit函数中，因此不会传递给redux操作调用，因此也不会分配给上述axios.post请求的路由

任何人都可以看到我在这里做错了吗-已经花了几个小时没有取得任何进展！

保存表单的React容器如下（为方便起见，我将HTML截断了，但从根本上讲是相同的）

SubmitOutcome.js

// imports
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

// components
import Navbar from '../components/layout/Navbar';
import Sidebar from '../components/layout/Sidebar';

// redux actions
import { submitOutcomeMeasure } from '../redux/actions/patientActions';

class SubmitOutcome extends Component {
  constructor() {
    super();
    this.state = { dateOfTesting: '', measure: '' };
  }

  // event handlers
  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  onSubmit = patient_id => e => {
    e.preventDefault();
    const outcomeData = {
      dateOfTesting: this.state.dateOfTesting,
      measure: this.state.measure
    };
    this.props.submitOutcomeMeasure(outcomeData, patient_id,  this.props.history);
  };

  render() {
    const { patient } = this.props.patients;

    return (
      <>
        <Navbar />
        <div className="app-body">
          <Sidebar />
          <main className="main">
            <div className="container">
              <form onSubmit={this.onSubmit.bind(this, patient._id)}>
                <div>
                  <input
                    type="date"
                    name="dateOfTesting"
                    value={this.state.dateOfTesting}
                    onChange={this.onChange}
                  />
                  <input
                    type="text"
                    name="measure"
                    value={this.state.measure}
                    onChange={this.onChange}
                  />
                </div>
                <div>
                  <Link to="/patients" className="btn btn-light mr-2">
                    Cancel
                  </Link>
                  <button type="submit" className="btn btn-primary">
                    Submit
                  </button>
                </div>
              </form>
            </div>
          </main>
        </div>
      </>
    );
  }
}

SubmitOutcome.propTypes = {
  submitOutcomeMeasure: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  patients: state.patients
});

export default connect(
  mapStateToProps,
  { submitOutcomeMeasure }
)(SubmitOutcome);

patientActions.js

中的相关操作

export const submitOutcomeMeasure = (
  outcomeData,
  id,
  history
) => dispatch => {
  axios
    .post(`/api/patients/outcomes/${id}`, outcomeData)
    .then(res => {
      history.push(`/portal/patients/${id}`);
    })
    .catch(err => {
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      });
    });
};

Answer 1

首先，您使用的是粗箭头，因此无需绑定，可以尝试使用此行，看看是否可行。

<form onSubmit={e => this.onSubmit(e, patient._id)}>

，然后将onSubmit定义更改为这样

onSubmit = (e, patient_id) => {
    e.preventDefault();
    const outcomeData = {
      dateOfTesting: this.state.dateOfTesting,
      measure: this.state.measure
    };
    this.props.submitOutcomeMeasure(outcomeData, patient_id,  this.props.history);
  };

看看是否可行

无法将ID变量传递到React表单的onSubmit函数

1 个答案: