如何在React中处理Flask返回的Response对象并获取字典列表数据

问题根因 #

1. JS端Promise链逻辑错误 #

你当前的Promise链式调用中，setAllActivities是React useState提供的状态更新方法，该方法没有返回值，执行后会返回undefined，因此下一个then回调接收到的入参自然是undefined，这是你打印出undefined的直接原因。
另外response.json()已经自动将接口返回的JSON字符串转换为JS对象，不需要再手动执行JSON.parse操作。

2. Flask端序列化兼容问题 #

Python原生的datetime对象无法被jsonify直接序列化，虽然你本地打印eqtls正常，但接口实际返回时会抛出序列化异常，容易导致前端拿到异常响应。

修正后的代码 #

Flask端 api.py #

只需要修改serialize方法里的date_added字段，转成ISO格式字符串即可：

def serialize(self):
    return {
        'id': self.id, 
        'name': self.name,
        'description': self.description,
        'xcoord': self.xcoord, 
        'ycoord': self.ycoord,
        # 把datetime转成ISO标准字符串，前端可以直接转成JS Date对象
        'date_added': self.date_added.isoformat() if self.date_added else None
    }

React端 app.js #

调整Promise链的逻辑，把状态更新和日志打印放在同一个then回调里即可：

useEffect(()=> {
    fetch('/allActivities').then(response => {
        if(response.ok){
            console.log(response)
            return response.json()
        }
        // 加上错误情况的抛出，方便排查问题
        throw new Error('接口请求异常')
    }).then(data => {
        console.log(data);
        // 这里已经可以直接访问列表元素了
        console.log(data[0]?.name)
        setAllActivities(data)
    }).catch(err => {
        // 加错误捕获，方便定位问题
        console.error('请求出错：', err)
    })
},[])

内容的提问来源于stack exchange，提问作者demongman