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

我正在尝试获取一些数据并在页面上显示数据。从屏幕截图中可以看到，用户数据是从GET call返回的。两个问题首先是“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

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
函数UserList（）{
const[data，setData]=useState（{data:[]}）；
useffect（（）=>{
常量url=https://zzs34n9ig88f.execute-api.us-east-1.amazonaws.com/dev/';
const fetchData=async（）=>{
const result=等待axios.post（url{
“httpMethod”：“GET”，
“queryStringParameters”：{
“表名”：“用户”
}
})
。然后（（响应）=>{
控制台日志（响应）；
}，（错误）=>{
console.log（错误）；
});
setData（result.data）；
};
fetchData（）；
}, []);
返回(
使用者

{data.data.map（项=>(
{item.email}
))}
);
}
导出默认用户列表

调试信息：

邮递员：

---

问题是您没有在

子句中返回已解析的值。
您应该跳过使用
。然后（）

或者，您可以返回
response
，但实际上不建议将
async/wait
和
.then（）混用起来

试试这个

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

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


let list=JSON.parse（result.data.body）；
setData（列表项）尝试
。然后（response=>{console.log（response）；return resposne；}）
映射如何？我在原始帖子中添加了另一张图片，以显示它返回的格式。
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);

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