React: Map multidimensional array with different k

问题:

How could I map a multidimensional array with differents keys? This is a example array similar: (my original array is obtained from ajax and PHP mysql query that's why I need to do this):

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'
                }
              }

        }
      ];

If I try to map this array I get: '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>
  );

}

With this array (without phones keys), works fine:

 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'
                    }
                  ]
            }
          ];

回答1:

products isn't an array so the map function won't work. Try

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

instead.

回答2:

In your first example, the phones property is an object not an array and therefore does not have the map function

The second one works phones is an array.

回答3:

As others before me told you, products isn't an array and therefore you can't use the map function on it.

Although, you can use the map function from lodash library which you can use in order to iterate over an object keys/values:

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

For more info, read here

回答4:

Arrays work slightly differently in JavaScript. In your case, a drop-in fix would be iterating over the values of the object, something like this:

{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>
)}

While some browsers still lack support for Object.values(), the transpilation step should take care of this.

Note that it is generally not advisable to use indices as keys, as you might get weird rendering bugs should the ordering or the contents of your iterables change.