ReactJS中如何提取控制器返回的JSON键值对并在AntD网格展示？

首先明确你的result.items是一个数组，而非单个对象，所以直接访问result.items.key会报错——数组本身没有key属性，你需要遍历数组中的每一项来提取值。

数据结构说明 #

你的result.items实际结构应该是这样的JavaScript对象数组：

result.items = [
  { key: { id: '123', name: 'Bob' }, value: '8987' },
  { key: { id: '428', name: 'Karen' }, value: '3258' }
]

正确提取与AntD网格展示示例 #

直接遍历数组，通过item.key.id、item.key.name、item.value提取对应值，结合AntD的Row和Col实现网格布局：

import { Row, Col } from 'antd';

const YourComponent = () => {
  // 假设已从控制器获取到result数据
  const items = result.items;

  return (
    <div style={{ padding: '16px' }}>
      {items.map(item => (
        <Row key={item.key.id} gutter={[16, 16]}>
          <Col span={8}>
            <p>ID: {item.key.id}</p>
          </Col>
          <Col span={8}>
            <p>姓名: {item.key.name}</p>
          </Col>
          <Col span={8}>
            <p>值: {item.value}</p>
          </Col>
        </Row>
      ))}
    </div>
  );
};

export default YourComponent;

额外说明 #

1. 不需要JSON.parse(result.items.key)：从后端接口返回给React的JSON数据，通常会被请求库（如axios、fetch）自动解析为JavaScript对象，无需再次解析。如果你的result还是字符串，只需解析整个result即可：const parsedResult = JSON.parse(result);，再访问parsedResult.items。
2. 遍历注意key属性：React列表渲染需要给每个子项设置唯一key，这里用item.key.id作为唯一标识，符合React要求。

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