使用griddle-react时，如何将AJAX获取的JSON转为Griddle可读数组？

看起来你是想把键值对格式的JSON对象转换成Griddle能用的数组，但代码里有几个关键问题，我帮你梳理下并给出修正方案：

问题分析 #

你的原始数据是类似 {"BTC": {"opening_price": "...", ...}, "ETH": {...}} 的键值对对象，但Griddle组件要求数据源是数组类型。你当前的代码存在这些问题：

• 循环中每次调用setState，会触发多次组件更新，而且最终state.data只会保留最后一次循环的结果，不是完整的数据集
• key[format]是完全错误的写法：key是字符串（比如"BTC"），format是JSON字符串，这样根本取不到有效数据
• 不需要用JSON.stringify把数据转成字符串，Griddle需要的是原始的对象结构

修正后的转换函数 #

我帮你重写了convert函数，把键值对对象转换成Griddle能识别的数组格式：

function convert(obj) {
  console.log('原始数据:', obj);
  // 将键值对对象转换为数组，每个元素包含币种标识和对应行情数据
  const formattedData = Object.entries(obj).map(([currency, details]) => {
    // 把币种名称加入到数据对象中，方便在表格里展示
    return {
      currency: currency,
      ...details // 展开所有行情字段（比如opening_price、closing_price等）
    };
  });
  // 一次性更新state，避免多次不必要的组件渲染
  self.setState(() => ({ data: formattedData }));
}

代码说明 #

• Object.entries(obj)会把你的原始对象转换成[["BTC", {...}], ["ETH", {...}]]这样的二维数组，每个子数组包含币种名称和对应的行情对象
• 用map遍历这个二维数组，把币种名称和行情字段合并成一个新对象，这样每个数组元素就是Griddle能处理的一条数据
• 最后一次性把整个数组设置到state中，确保Griddle拿到完整的数据集

配合Griddle组件使用 #

之后你可以在Griddle组件里直接使用这个数组，还可以指定要展示的列：

<Griddle
  data={this.state.data}
  columns={["currency", "opening_price", "closing_price"]} // 根据你的实际字段调整
/>

这样应该就能正常渲染数据啦！

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