Как получить аксиос после ответа на запрос в виде таблицы

Question

Я сделал пост-запрос, используя Axios, и я вижу ответ, сохраненный в объекте данных в моей консоли Devtools.

Я попытался перебрать его, используя функцию map. Но массив по какой-то причине пуст.

Axios Запрос POST: -

axios.post('http://localhost:8080/accountStatus', {
      username : "username",
      accountStatus : "status"
    })
    .then(function(response) {
      console.log(response);
    })
    .catch(function(error) {
      console.log(error);
    });

Массив items был инициализирован в моем конструкторе. Метод рендеринга: -

var {items, username, accountStatus} = this.state;
<div className="App">
          <table>
          <thead>
               <td>
                {items.map(item =>
                  <tbody>
                    {item.username}
                  </tbody>
                )}
              </td>  
          </thead>
          </table>
</div>

Ошибка в том, что массив элементов не определен. Массив items пуст, и поэтому я не могу перебирать массив с помощью map (). Конечная точка работает нормально, и я проверил это. Пожалуйста, помогите мне решить эту проблему.

Answer 1

Это, вероятно, должно сработать.

, как упомянуло Пантерой, один из способов сделать это - использовать асинхронный, так что это действительный код

async componentDidMount(){
   const items = await axios.post('http://localhost:8080/accountStatus',{username : "username",
  accountStatus : "status"}
  this.setState({isLoaded:true,items});
}

В коде / комментарии Nane, которые вы упомянуличто

TypeError: Невозможно прочитать свойство 'setState' из неопределенного

. Для этого вы делаете одну из этих двух вещей

const that = this
axios.post('http://localhost:8080/accountStatus', {
      username : "username",
      accountStatus : "status"
    })
    .then(function(response) {
        that.setState({
        isLoaded: true,
        items: response,
      })
    })

или используете стрелкувместо функции

axios.post('http://localhost:8080/accountStatus', {
      username : "username",
      accountStatus : "status"
    })
    .then((response) => {
        that.setState({
        isLoaded: true,
        items: response,
      })
    })

или bind this ключевое слово

Кроме того, как уже упоминалось в комментарии, я не уверен, что вы можете использовать функцию со стрелкой, говоря, что просмотрите следующую строку в вашемкод (который в любом случае не нужен)

function(json) => {

Answer 2

Вы можете попробовать этот асинхронный код также, как этот

async componentDidMount(){
   const items = await axios.post('http://localhost:8080/accountStatus',{username : "username",
  accountStatus : "status"}
  this.setState({isLoaded:true,items});
}