Блог

 import React, { Component } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { Button } from "react-bootstrap";

export default class DeleteTodo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      todo_description: "",
      todo_responsible: "",
      todo_id: this.props.match.params.id,
    };

    console.log(this.props.match.params.id);
  }

  onSubmit(e) {
    e.preventDefault();
    axios
      .post("http://localhost:4000/todos/delete/"   this.props.match.params.id)
      .then((res) => console.log(res.data));

    this.props.history.push("/");
  }

  render() {
    console.log(this.props.match.params.id);
    return (
      <div>
        <h3 align="center">Confirm Delete</h3>
        <form onSubmit={this.onSubmit}>
          <div>
            <b className="d-inline">Description: </b>
            <p className="d-inline">{this.state.todo_description}</p>
          </div>
          <div>
            <b className="d-inline">Responsible: </b>
            <p className="d-inline">{this.state.todo_responsible}</p>
          </div>
          <br />
          <div>
            <Button size="sm" type="submit" variant="danger">
              Delete
            </Button>
            amp;#8195;
            <Link to={"/"}>
              <Button size="sm" variant="info">
                Undo
              </Button>
            </Link>
          </div>
        </form>
      </div>
    );
  }
}
 

Я хочу добавить идентификатор объекта в маршрут сообщения Axios.

console.log (this.props.match.params.id ); будет регистрировать идентификатор в конструкторе и в рендеринге, но props отображается undefined в вызове Axios. Как мне получить идентификатор для арендатора внутри onSubmit()?

Ваша проблема в том, что ваша onSubmit функция не имеет той же this переменной, что и собственные функции react. Чтобы решить эту проблему, вам необходимо связать функцию с объектом component.

Подробнее об этом можно прочитать здесь: https://reactjs.org/docs/handling-events.html

Замените ваш файл следующим:

 import React, { Component } from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { Button } from "react-bootstrap";

export default class DeleteTodo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      todo_description: "",
      todo_responsible: "",
      todo_id: this.props.match.params.id,
    };

    this.onSubmit = this.onSubmit.bind(this) // new line added

    console.log(this.props.match.params.id);
  }

  onSubmit(e) {
    e.preventDefault();
    axios
      .post("http://localhost:4000/todos/delete/"   this.props.match.params.id)
      .then((res) => console.log(res.data));

    this.props.history.push("/");
  }

  render() {
    console.log(this.props.match.params.id);
    return (
      <div>
        <h3 align="center">Confirm Delete</h3>
        <form onSubmit={this.onSubmit}>
          <div>
            <b className="d-inline">Description: </b>
            <p className="d-inline">{this.state.todo_description}</p>
          </div>
          <div>
            <b className="d-inline">Responsible: </b>
            <p className="d-inline">{this.state.todo_responsible}</p>
          </div>
          <br />
          <div>
            <Button size="sm" type="submit" variant="danger">
              Delete
            </Button>
            amp;#8195;
            <Link to={"/"}>
              <Button size="sm" variant="info">
                Undo
              </Button>
            </Link>
          </div>
        </form>
      </div>
    );
  }
}