React：用不同的键映射多维数组

IT技术 javascript reactjs ecmascript-6
2021-05-09 11:04:14

如何映射具有不同键的多维数组？这是一个类似的示例数组：（我的原始数组是从 ajax 和 PHP mysql 查询中获得的，这就是我需要这样做的原因）：

var products = [
        {
            id: 1,
            name: 'John',
            phones: {
                sony:
                {
                  brand: 'sony',
                  model: 'z3'
                },
                samsung:
                {
                  brand: 'samsung',
                  model: 's7'
                }
              }

        },
        {
            id: 2,
            name: 'Mike',
            phones: {
                sony:
                {
                  brand: 'sony',
                  model: 'z1'
                },
                nokia:
                {
                  brand: 'nokia',
                  model: 'n8'
                }
              }

        }
      ];

如果我尝试映射这个数组，我会得到：'Uncaught TypeError: product.phones.map is not a function'：

const List = ({ products, addToCart }) => { 

  return (
    <div className="odds-3">
      <div className="odds">

        {products.map((product, index) =>
          <div key={index}>
            <p>{product.id} - {product.name}</p>
            <ul>
              {product.phones.map((phone, index) =>

                <li key={index}>{phone.brand} - {phone.model}</li>

              )}
            </ul>
          </div>
        )}
      </div>
    </div>
  );

}

使用这个数组（没有电话键），工作正常：

 var products = [
            {
                id: 1,
                name: 'John',
                phones:
                    [{
                      brand: 'sony',
                      model: 'z3'
                    },
                    {
                      brand: 'samsung',
                      model: 's7'
                    }
                  ]
            },
            {
                id: 2,
                name: 'Mike',
                phones:
                    [{
                      brand: 'sony',
                      model: 'z1'
                    },
                    {
                      brand: 'nokia',
                      model: 'n8'
                    }
                  ]
            }
          ];
4个回答

products不是数组，因此该map函数将不起作用。尝试

{Object.keys(product.phones).map((phone, index) =>
 <li key={index}>{product.phones[phone].brand} - {product.phones[phone].model}</li>
)}

反而。

在您的第一个示例中，phones 属性object不是一个array，因此没有该map功能

第二个作品phones是一个array.

正如我之前的其他人告诉你的那样，products它不是一个数组，因此你不能在它上面使用 map 函数。

虽然，您可以使用库中的map函数lodash来迭代对象键/值：

import map from 'lodash'
{map(product, (value, key) =>
 ...
)}

欲了解更多信息，请阅读此处

数组在 JavaScript 中的工作方式略有不同。在您的情况下，插入式修复将迭代对象的值，如下所示：

{products.map((product, index) =>
    <div key={index}>
        <p>{product.id} - {product.name}</p>
        <ul>
            {Object.values(product.phones).map((phone, index) =>
            <li key={index}>{phone.brand} - {phone.model}</li>
            )}
        </ul>
    </div>
)}

虽然一些浏览器仍然缺乏对 的支持Object.values()，但转译步骤应该解决这个问题。

请注意，通常不建议使用索引作为键，因为如果可迭代对象的排序或内容发生变化，您可能会遇到奇怪的渲染错误。

其它你可能感兴趣的问题
上一篇React-chartjs-2：饼图工具提示百分比 下一篇如何在react组件中显示字符串数组