访问后端返回对象的body属性为字符串，无法获取Items数组怎么办？

• 后端Lambda代码中将DynamoDB查询结果通过JSON.stringify(data)序列化为JSON字符串后，赋值给了body字段返回，因此返回的body本身就是字符串类型。
• Axios默认仅自动解析最外层的响应数据为JS对象，不会自动递归处理内层的JSON格式字符串，因此你拿到的response.data中body字段仍然保持字符串格式，无法直接访问内部的Items属性。

你可以直接在前端对body字段做JSON反序列化即可，修改getData代码如下，同时增加异常处理避免解析报错：

async getData() {
  await axios.get("https://...")
  .then((response) => {
    const rawData = response?.data ?? {};
    let parsedBody = { Items: [] };
    // 反序列化body字段的JSON字符串
    try {
      if (rawData.body) {
        parsedBody = JSON.parse(rawData.body);
      }
    } catch (e) {
      console.error('body数据解析失败', e);
    }
    // 将解析后的Items存入state，后续直接用来渲染表格
    this.setState({
      message: rawData,
      itemList: parsedBody.Items || []
    });
  })
}

后续在render方法中直接遍历this.state.itemList渲染表格即可，参考示例：

render() {
  return (
    <table border={1}>
      <thead>
        <tr>
          <th>key1</th>
          <th>key2</th>
        </tr>
      </thead>
      <tbody>
        {this.state.itemList.map((item, idx) => (
          <tr key={idx}>
            <td>{item.key1}</td>
            <td>{item.key2}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

如果你希望后端处理，也可以调整Lambda返回结构，将需要的字段直接平铺到最外层返回，避免前端二次解析，但需要注意你的API网关集成规则是否允许修改返回结构。

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