Как я могу использовать ajax в функции onclick по реакции?

Question

Я хочу показать некоторые результаты в этой функции, используя ajax. Как я могу использовать ajax в функции onclick при использовании React?

onItemClick(a) {
  console.log("Button was clicked!");
  var desc = Flightdesc.info.departureinformation.routeshow.description;
  $.ajax({
    url: "/flyrules.inc",
    type: "post",
    data: {
      id: desc
    },
    success: result => {
      console.log(result);
    }
  });
}

Answer 1

Вы должны использовать fetch API, который не требует никакой библиотеки для работы.

onItemClick(a) {
  console.log("Button was clicked!");
  var desc = Flightdesc.info.departureinformation.routeshow.description;

  const yourBaseUrl = 'http://localhost:3000'; // example
  const path = '/flyrules.inc';
  const bodyParams = { id: desc };
  const url = new URL(path, yourBaseUrl);

  fetch('/flyrules.inc', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(bodyParams)
  })
    .then((response) => response.json())
    .then((data) => data);
}

Answer 2

Существует несколько мер предосторожности, применимых к вашему коду, я предлагаю прочитать пошаговое руководство по React на официальном сайте.

// Bind function to local context with fat arrow
onItemClick = (a) => {
  // Prefer const/let over var
  const desc = Flightdesc.info.departureinformation.routeshow.description;
  $.ajax({
    url: "/flyrules.inc",
    type: "post",
    data: {
      id: desc
    },
    success: result => {
      // setState is an ASYNC function so check the new state in the callback
      this.setState({ data: result }, () => console.log(this.state.data););
    }
  });
}