Как получить данные из ответа с помощью axios - PullRequest
Новая
       8

Как получить данные из ответа с помощью axios

0 голосов
/ 22 апреля 2020

Я пытаюсь получить некоторые данные и отобразить данные на странице. Как видно из скриншота, пользовательские данные возвращаются с GET-вызова. Два вопроса - это, во-первых, ошибка «setData (result.data)»; линия. Во-вторых, как только эта ошибка исправлена, как мне правильно отобразить данные в моем операторе возврата? 

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function UserList() {

    const [data, setData] = useState({ data: [] });

    useEffect(() => {

        const url = 'https://zzs34n9ig88f.execute-api.us-east-1.amazonaws.com/dev/';

        const fetchData = async () => {

            const result = await axios.post(url, {
                "httpMethod": "GET",
                "queryStringParameters": {
                  "TableName": "Users"
                }
              })
              .then((response) => {
                console.log(response);
              }, (error) => {
                console.log(error);
              });
            setData(result.data);
        };
        fetchData();
        }, []);

    return (
        <div>
            <p>Users</p>
        {data.data.map(item => (
            <div>
                <span>{item.email}</span>
            </div>
        ))}
        </div>
    );
}

export default UserList

отладочная информация:

enter image description here

Почтальон:

enter image description here

Ответы [ 3 ]

2 голосов
/ 22 апреля 2020

Как можно заключить из заголовка вашего ответа, перед настройкой своего состояния просто сделайте следующее: 

let list = JSON.parse(result.data.body);

setData(list.Items);
1 голос
/ 22 апреля 2020

Попробуйте это 

const fetchData = async () => {

            const result = await axios.post(url, {
                "httpMethod": "GET",
                "queryStringParameters": {
                  "TableName": "Users"
                }
              })
              .then((response) => {
                console.log(response);
                return response; // return response here
              }, (error) => {
                console.log(error);
              });
            setData({data:JSON.parse(result.data.body).Items}); // setData like this
        };
        fetchData();
        }, []);
1 голос
/ 22 апреля 2020

Проблема в том, что вы не возвращаете разрешенное значение в предложении .then(). Вы должны пропустить, используя .then(): 

const result = await axios.post(url, {
    "httpMethod": "GET",
    "queryStringParameters": {
        "TableName": "Users"
    }
});
try {
    console.log(result)
    setData(result.data);
} catch (e) {
   console.log(e)
}

В качестве альтернативы, вы можете вернуть response, но не рекомендуется смешивать async/await и .then(). 

const result = await axios.post(url, {
        "httpMethod": "GET",
        "queryStringParameters": {
            "TableName": "Users"
        }
    })
    .then((response) => {
        console.log(response);
        return response;
    }, (error) => {
        console.log(error);
    });
setData(result.data);
...