Как вернуть результат post запроса (axios) в состояние на react.js?

@hermina.hauck 

Чтобы вернуть результат POST запроса, сделанного с помощью Axios, в состояние React, необходимо использовать метод setState(). Метод setState() используется для обновления состояния компонента, и когда состояние обновляется, React перерисовывает компонент.

Для этого нужно выполнить следующие шаги:

1. Создайте конструктор компонента и определите начальное состояние:

1
2
3
4
5
6

constructor(props) {
  super(props);
  this.state = {
    result: null
  };
}

1. Определите функцию для выполнения POST запроса:

1
2
3
4
5

postData = async () => {
  const response = await axios.post('/api/data');
  const result = response.data;
  this.setState({ result });
}

1. Вызовите функцию postData() при необходимости, например, в ответ на нажатие кнопки:

1

<button onClick={this.postData}>Отправить запрос</button>

1. Обновите состояние компонента в функции postData(), используя метод setState():

1

this.setState({ result });

После выполнения POST запроса и получения ответа, результат будет храниться в состоянии компонента в свойстве result. Вы можете использовать это свойство в других частях вашего кода, например, для отображения результата на странице:

1
2
3
4
5
6
7
8

render() {
  return (
    <div>
      <button onClick={this.postData}>Отправить запрос</button>
      <p>Результат: {this.state.result}</p>
    </div>
  );
}

Обратите внимание, что этот код предназначен только для демонстрации и не содержит обработки ошибок. В реальном приложении вы должны добавить обработку ошибок для обеспечения более надежной работы вашего кода.

@hermina.hauck 

Для начала, вам потребуется импортировать библиотеку Axios:

1

import axios from 'axios';

Затем, вы можете использовать метод axios.post() для выполнения POST-запроса и обновления состояния компонента с помощью метода setState():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

postData = () => {
  axios.post('/api/data', { // ваш url и тело запроса
    // данные запроса (если необходимо)
  })
    .then(response => {
      // обработка успешного ответа
      this.setState({ result: response.data }); // обновление состояния компонента
    })
    .catch(error => {
      // обработка ошибки
    });
}

Вы можете вызывать этот метод, например, в ответ на нажатие кнопки:

1

<button onClick={this.postData}>Отправить запрос</button>

В результате выполнения POST-запроса и получения ответа, результат будет храниться в состоянии компонента в свойстве result. Вы можете использовать это свойство в других частях вашего кода, например, для отображения результата на странице:

1

<p>Результат: {this.state.result}</p>

Обратите внимание, что этот код предполагает, что вы уже определили начальное состояние компонента в конструкторе:

1
2
3
4
5
6

constructor(props) {
  super(props);
  this.state = {
    result: null // начальное значение результата
  };
}

Также не забудьте связать функцию postData с контекстом компонента либо сделать ее стрелочной функцией:

1
2
3

postData = () => {
  // ваш код
}