如何在 React 中重新排序地图函数

Question

我的数据是这样的

data = [
  {
    "id": "27eb95f9",
    "title": "hello",
    "sort": 4
  },
  {
    "id": "367da510",
    "title": "bro",
    "sup-title": "",
    "sort": 2
  },
  {
    "id": "27eb95f9",
    "title": "how ",
    "sort": 3
  },
  {
    "id": "367da510",
    "title": "you doing",
    "sup-title": "",
    "sort": 1
  },

现在我想在 React 中使用地图功能来显示 'title' 但我希望顺序根据对象文件中的“排序”。我该怎么做？

Answer 1

它可能会起作用，首先 JSON.parse(data) 将其作为对象，然后

data.map(row => return {
   ...row, order : row.sort
})

Answer 2

先用排序功能，再贴图吧！请看下面。在第二个示例中，您也可以使用它来呈现您的组件。

您可以在这里阅读有关排序方法的信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

const data = [
  {
    "id": "27eb95f9",
    "title": "hello",
    "sort": 4
  },
  {
    "id": "367da510",
    "title": "bro",
    "sup-title": "",
    "sort": 2
  },
  {
    "id": "27eb95f9",
    "title": "how ",
    "sort": 3
  },
  {
    "id": "367da510",
    "title": "you doing",
    "sup-title": "",
    "sort": 1
  }];
  
const sortedTitles = data.sort((d1, d2)=>d1-d2).map((d)=>d.title);
console.table(sortedTitles);

render = data.sort((d1, d2)=>d1-d2).map((d)=>`<p>${d.title}</p>`).join("");
console.log(render);

document.getElementById("app").innerHTML = render

<div id="app"></div>

如何在 React 中重新排序地图函数

How to reorder map function in React

dictionary

loops

for-loop

reactjs