在我的 React JS 示例中，Array.from(object) 不会将对象转换为数组

Question

我试图接受一个对象并将其转换为一个数组，以便我可以使用 map 函数在我的 react 应用程序中呈现它。我发现有两种方法可以将对象转换为数组，一种是使用Array.from(object)，第二种是Object.values(object)。当我使用第二种方法时，我的反应应用程序运行良好。但是如果我使用第一种方法，我会得到一个空数组，但是当我控制台记录数组的长度时，它会显示数组的实际长度，在我的例子中是 3。 此外，在我的例子中，undefined 值存储在数组中。

请找到下面的sn-p。

const Example = () => {

let object = {
  productName : "Desktop",
  quantity: 2,
  price: 4000,
  length:3
};

let arr = Array.from(object);

console.log(arr.length);
console.log(arr);

  return ( 
          <div>
              <ul>                  
                {arr.map((item,k) => <li key={k}>{item}</li>)}
              </ul> 
          </div>
         );
};

ReactDOM.render(
    <Example />,document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 1

Array.from 需要一个具有length 属性和每个元素的编号属性的值。像这样：

var arrayLike = {
    0: "hello",
    1: "hello again",
    2: "goodbye",
    length: 3,
};

（旁注：Array.from 也适用于可迭代对象，但这是另一回事）

你的对象不是那样的。你有 length 属性，所以它给你一个长度为 3 的数组，但你没有 0、1 或 2 属性。

如果您实际上不需要对属性名称（产品名称、数量、价格）做任何事情，那么我认为您最好使用 Object.values，但请记住还有 Object.entries允许您成对使用属性名称及其值：

{Object.entries(object).map(
    ([key, value]) => <li key={key}>{key} - {value}</li>
)}