在我的 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 = {&nbsp; &nbsp; 0: "hello",&nbsp; &nbsp; 1: "hello again",&nbsp; &nbsp; 2: "goodbye",&nbsp; &nbsp; length: 3,};（旁注：Array.from也适用于可迭代对象，但那是另外一回事了）你的对象不是那样的。您拥有该length属性，因此它为您提供了一个长度为 3 的数组，但您没有0、1或2属性。如果您实际上不需要对属性名称（产品名称、数量、价格）做任何事情，那么我认为您最好使用 ，Object.values但请记住，还有它Object.entries允许您使用属性名称和它们成对的值：{Object.entries(object).map(&nbsp; &nbsp; ([key, value]) => <li key={key}>{key} - {value}</li>)}