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

Question

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

请找到以下代码段。

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