Question

我正在尝试获取一些数据并在页面上显示数据。从屏幕截图中可以看到，用户数据是从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

调试信息：

邮递员：

Answer 1

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

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

setData(list.Items);

Answer 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);

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

如何从axios的响应中获取数据

3 个答案: