Невозможно передать переменную ID в функцию onSubmit формы React

Question

У меня есть приложение React / Redux, использующее axios для отправки запросов в экспресс-бэкэнд.

Я пытаюсь отправить форму на маршрут бэкэнда /api/patients/outcomes/:id - где :id - идентификатор MongoDB дляконкретный пациент, которому принадлежат данные в форме.На бэкэнде маршрут добавляет данные формы в массив 'results' объекта пациента.

У меня проблемы с получением :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 и, следовательно, не передается в вызов действия приставки и, в свою очередь, не присваивается упомянутому маршрутувыше для запроса 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);

Соответствующее действие от Patient Actions.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);
  };

и посмотрите, работает ли оно