Блог

Я пытался принять объект и преобразовать его в массив, чтобы я мог отобразить его в своем приложении react с помощью функции map. Я обнаружил, что существует два метода преобразования объекта в массив, один из которых использует 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>  

Array.from ожидает значение, которое имеет length свойство и пронумерованные свойства для каждого элемента. Вот так:

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

(Примечание: Array.from также работает с итерациями, но это совсем другая история)

Ваш объект не такой. У вас есть length свойство, поэтому оно выдает вам массив длиной 3, но у вас нет 0 свойства , 1 , или 2 .

Если вам на самом деле не нужно ничего делать с именами свойств (ProductName, quantity, price), то я думаю, вам лучше всего Object.values , но имейте в виду, что есть также Object.entries , который позволяет вам работать с именами свойств и их значениями в парах:

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