如何使用 axios 从响应中获取数据答案

【问题标题】：How get data from response with axios如何使用 axios 从响应中获取数据
【发布时间】：2020-04-22 14:22:15
【问题描述】：

我正在尝试获取一些数据并在页面上显示数据。从屏幕截图中可以看出，用户数据是从 GET 调用中返回的。两个问题首先显然是“setData(result.data);”上的错误。线。其次，一旦该错误得到纠正，我如何正确映射我的 return 语句中的数据？

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

调试信息：

邮递员：

【问题讨论】：

试试.then(response=>{ console.log(response); return resposne; })

标签： reactjs axios

【解决方案1】：

正如我从您回复的标题中得出的结论，在设置您的状态之前，只需执行以下操作：

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

setData(list.Items);

【讨论】：

【解决方案2】：

问题是您没有在.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);

【讨论】：

映射呢？我在原始帖子中添加了另一张图片，以显示它返回的格式。

【解决方案3】：

试试这个

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();
        }, []);

【讨论】：