React中如何将JSON文件数据转换为指定格式的二维数组？

嘿，作为React新手，这个需求其实超容易实现的！咱们直接上代码，一步步来：

第一步：准备你的JSON文件 #

假设你把这个JSON数据存在了src/products.json文件里，内容就是你提供的：

[{ "name": "bagette", "price": "0.200" }, { "name": "farine", "price": "1" }, { "name": "tomato", "price": "1.200" }, { "name": "chocola", "price": "4.000" }]

第二步：编写React组件实现转换 #

下面是一个完整的函数组件示例，咱们把JSON数据转换成你想要的二维数组格式：

import React from 'react';
// 导入你的JSON文件
import productsData from './products.json';

function ProductList() {
  // 将对象数组转换为二维数组：每个子数组是 [name, price]
  const convertedData = productsData.map(item => [item.name, item.price]);

  // 验证转换结果，和你想要的访问效果一致
  console.log(convertedData[0][0]); // 输出 bagette
  console.log(convertedData[0][1]); // 输出 0.200
  console.log(convertedData[1][0]); // 输出 farine
  console.log(convertedData[3][1]); // 输出 4.000

  return (
    <div>
      {/* 这里可以添加你想渲染的内容，比如遍历展示商品 */}
      <h2>商品列表</h2>
      <ul>
        {convertedData.map(([name, price], index) => (
          <li key={index}>
            {name} - 价格：{price}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

关键代码解释 #

• productsData.map(item => [item.name, item.price])：这行是核心！用数组的map方法遍历原来的对象数组，把每个对象转换成包含name和price的子数组，最终得到你需要的二维数组。
• 转换后的convertedData就是你想要的格式，完全支持convertedData[0][0]、convertedData[3][1]这种访问方式。

如果你习惯用类组件，思路也是一样的，只需要把转换逻辑放在componentDidMount或者constructor里就行啦！

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