我正在尝试对我的对象数组进行排序，但它不起作用答案

【问题标题】：I'm trying to sort my array of objects but its not working我正在尝试对我的对象数组进行排序，但它不起作用
【发布时间】：2021-03-21 05:40:20
【问题描述】：

我正在尝试对我的对象数组进行排序，但它不起作用。有人能看出它为什么不起作用吗？

    function App(){
      let products = [
        {
          name: "LED",
          price: 50000,
          status: true,
          image: "images/products/Krunch-Combo-kfc.png"
        },
        {
          name: "Bike",
          price: 40000,
          status: false,
          image: "images/products/Krunch-Combo-kfc.png"
        },
        {
          name: "Mobile",
          price: 60000,
          status: true,
          image: "images/products/Krunch-Combo-kfc.png"
        },
        {
          name: "Apple Watch",
          price: 6000,
          status: true,
          image: "images/products/Krunch-Combo-kfc.png"
        }
      ];
    
      return (
        <div>
    
          <ul>
            {
              products.sort((a, b) => parseFloat(a.price) - parseFloat(b.price))
            }
          </ul>
        </div>
  )
}

export default App;

这是我遇到的错误。 错误：对象作为 React 子对象无效（发现：对象带有键 {name, price, status, image}）。如果您打算渲染一组子项，请改用数组。

【问题讨论】：

正如错误所说。无法渲染普通对象。弄清楚您希望对象如何显示。
你想渲染什么？每个项目的名称？如果是这样，您需要在对象数组上使用 .map() 并返回一个可以呈现的元素，例如 JSX
我想根据价格对我的对象进行排序。就像这样stackoverflow.com/questions/979256/…
它可以工作，但你不能渲染普通对象。使用 map 函数创建 JSX 元素数组products.sort(...).map(item=><div>{item.name}:{item.price}</div>

标签： javascript reactjs ecmascript-6

【解决方案1】：

短数组后你想用它们做什么？

【讨论】：

【解决方案2】：

import { useMemo } from "react";

let products = [
  {
    name: "LED",
    price: 50000,
    status: true,
    image: "images/products/Krunch-Combo-kfc.png"
  },

  {
    name: "Bike",
    price: 40000,
    status: false,
    image: "images/products/Krunch-Combo-kfc.png"
  },
  {
    name: "Mobile",
    price: 60000,
    status: true,
    image: "images/products/Krunch-Combo-kfc.png"
  },
  {
    name: "Apple Watch",
    price: 6000,
    status: true,
    image: "images/products/Krunch-Combo-kfc.png"
  }
];

function App() {
  const memoizedProducts = useMemo(
    () =>
      products.sort((a, b) => {
        const priceA = parseFloat(a.price);
        const priceB = parseFloat(b.price);

        if (priceA < priceB) return -1;
        if (priceA > priceB) return 1;

        return a.name.localeCompare(b.name);
      }),
    []
  );

  return (
    <div>
      <ul>
        {memoizedProducts.map(({ name, price }, index) => (
          <li key={index}>
            {name} - {price}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

【讨论】：

【解决方案3】：

我想这就是你要找的：

function App() {
  let products = [
    {
      name: "LED",
      price: 50000,
      status: true,
      image: "images/products/Krunch-Combo-kfc.png",
    },
    {
      name: "Bike",
      price: 40000,
      status: false,
      image: "images/products/Krunch-Combo-kfc.png",
    },
    {
      name: "Mobile",
      price: 60000,
      status: true,
      image: "images/products/Krunch-Combo-kfc.png",
    },
    {
      name: "Apple Watch",
      price: 6000,
      status: true,
      image: "images/products/Krunch-Combo-kfc.png",
    },
  ];

  const sortedProducts = products.sort(
    (productA, productB) =>
      parseFloat(productA.price) - parseFloat(productB.price)
  );

  return (
    <div className="app">
      <ul>{JSON.stringify(sortedProducts)}</ul>
    </div>
  );
}

export default App;

为了在DOM 中渲染jsx 中的产品，请使用高阶数组函数map。

祝你好运，如果这是您要找的，请告诉我

【讨论】：