如何在ReactJs中对数据进行排序

我有一些Items数据，当roomname为Double且类型为2时，我试图在costtable数组中显示按成本字段排序的数组值。以下是我的代码：

Json:

代码：

这段代码没有给我任何错误，但以未排序的格式显示值。我怎么分类呢

新代码

---

通过插入…省略算法气泡、快速排序。。。。可以在UI上下文中进行排序

您的json有： 标题|成本|单位|类型

你需要什么样的？标题是字符串，例如按字母顺序排序，然后成本、单位和类型是数字升序+降序

这将是有帮助的-当将来您只提供必需的代码时

这里是负责asc/desc排序的优雅简约功能

首先，它需要将您不想排序的props传递到value state

以下是您的对象按成本排序：

let text = [{
    "index": 1,
    "id": "5e3961face022d16a03b1de9_1023632_1004876",
    "costtable": [
        {
            "roomname": "Single",
            "room_id": "1023632_479490,1004876_385485",
            "family": [
                {
                    "title": "adult 1",
                    "cost": 3.7568000,
                    "unit": "10",
                    "type": "2"
                }
            ]
        }
    ]
},
{
    "index": 2,
    "id": "5e3961face022d16a03b1de9_1088496_1005362",
    "costtable": [
        {
            "roomname": "Double",
            "room_id": "1088496_447339,1005362_415279",
            "family": [
                {
                    "title": "adult 1",
                    "cost": 5.6868000,
                    "unit": "10",
                    "type": "2"
                }
            ]
        }
    ]
},
{
    "index": 3,
    "id": "5e3961face022d16a03b1de9_1141859_1005529",
    "costtable": [
        {
            "roomname": "Single",
            "room_id": "1141859_74888,1005529_870689",
            "family": [
                {
                    "title": "adult 1",
                    "cost": 5.9586000,
                    "unit": "10",
                    "type": "2"
                }
            ]
        }
    ]
}
]

const App = () =>{

    const usersWithName = Object.keys(text).map(function(key) {
        var user = text[key];
        return user.costtable[0].family[0].cost;
      });

    let costArray = usersWithName

    const [ascValue, setAscValue] = useState(true);
    const [values, setValues] = useState(costArray);


        function sortValues() {
            const compare = ascValue ? (a, b) => a - b : (a, b) => b - a;
            setValues([...values].sort(compare));
          }


        useEffect(() => {
            sortValues();
          }, [ascValue]);




        return (
        <div>
            <h3>{ascValue.toString()}</h3>
            <button onClick={() => setAscValue(!ascValue)}>Toggle Asc</button>
            {values.map(v => (
                <p key={v}>{v}</p>
            ))}
        </div>
        );
    }

export default App;

---

我不知道在这种情况下的性能+如果在json中更具成本表和系列，它应该通过[I]迭代器进行迭代。

我不理解您用于排序的确切公式，但您在排序之前所做的是错误的

在你的组件中

这会将数组返回到名为CostSort的变量中，并且不会以任何方式影响MainData

但是，稍后您会这样做

Maindata.sort((a, b) => a.CostSort - b.CostSort);

对于第一次迭代，这将比较Maindata[0]和Maindata[1]。请注意，这两个对象中都没有CostSort，因此您正在执行undefined-undefined操作，该操作为NaN。因此，不进行排序

我建议您只使用sort函数，并在两个值之间进行比较

Maindata.sort((a, b) => {
 // Do your calculation here

 if(a should be before b) {
    return -1;
  } else {
    return 1;
  }
}

js中变量的约定是camelCase而不是PascalCase。所以，主数据应该是主数据

编辑： 下面是一个简单的排序实现，它适用于上述情况，您可以根据您的完整用例对其进行扩展

Maindata.sort((a, b) => {
  let lenFamilies = a.costtable.length;
  for (let i = 0; i < lenFamilies; i++) {
    if (
      a.costtable[i].roomname.includes("Double") &&
      !b.costtable[i].roomname.includes("Double")
    ) {
      return -1;
    }
    if (
      !a.costtable[i].roomname.includes("Double") &&
      b.costtable[i].roomname.includes("Double")
    ) {
      return 1;
    }
    if (a.costtable[i].roomname.indexOf("Double") > -1) {
      for (let j = 0; j < a.costtable[i].family.length; j++) {
        if (a.costtable[i].family[j].type == 2) {
          a.costtable[i].family[j].cost - b.costtable[i].family[j].cost;
        }
      }
    }
  }
});

---

谢谢@Hassaan Tauqir的回答，但是我怎样才能访问Maindata.sorta，b=>{}中的costtablearray并进行计算呢？我按照你在新代码部分中所说的做了，但仍然以未排序的格式显示值@Maya a和b是Maindata数组中的对象，因此，可以使用a.costtable和b.costtable访问costtable。尝试在排序中使用console.loga、b，您将在浏览器中看到该对象console@HassaanTauqir是的，我可以在浏览器控制台中看到该对象，如果您查看代码的新代码部分，我可以看到a.costtable[I].family[j].cost也在我的浏览器控制台中，但值不是未排序的格式。您能否提供有关如何对数组排序的详细信息，以便我制定解决方案。我不知道你的确切排序逻辑。

let text = [{
    "index": 1,
    "id": "5e3961face022d16a03b1de9_1023632_1004876",
    "costtable": [
        {
            "roomname": "Single",
            "room_id": "1023632_479490,1004876_385485",
            "family": [
                {
                    "title": "adult 1",
                    "cost": 3.7568000,
                    "unit": "10",
                    "type": "2"
                }
            ]
        }
    ]
},
{
    "index": 2,
    "id": "5e3961face022d16a03b1de9_1088496_1005362",
    "costtable": [
        {
            "roomname": "Double",
            "room_id": "1088496_447339,1005362_415279",
            "family": [
                {
                    "title": "adult 1",
                    "cost": 5.6868000,
                    "unit": "10",
                    "type": "2"
                }
            ]
        }
    ]
},
{
    "index": 3,
    "id": "5e3961face022d16a03b1de9_1141859_1005529",
    "costtable": [
        {
            "roomname": "Single",
            "room_id": "1141859_74888,1005529_870689",
            "family": [
                {
                    "title": "adult 1",
                    "cost": 5.9586000,
                    "unit": "10",
                    "type": "2"
                }
            ]
        }
    ]
}
]

const App = () =>{

    const usersWithName = Object.keys(text).map(function(key) {
        var user = text[key];
        return user.costtable[0].family[0].cost;
      });

    let costArray = usersWithName

    const [ascValue, setAscValue] = useState(true);
    const [values, setValues] = useState(costArray);


        function sortValues() {
            const compare = ascValue ? (a, b) => a - b : (a, b) => b - a;
            setValues([...values].sort(compare));
          }


        useEffect(() => {
            sortValues();
          }, [ascValue]);




        return (
        <div>
            <h3>{ascValue.toString()}</h3>
            <button onClick={() => setAscValue(!ascValue)}>Toggle Asc</button>
            {values.map(v => (
                <p key={v}>{v}</p>
            ))}
        </div>
        );
    }

export default App;

let CostSort = Maindata.map(a => { return this.renderSort(a) })

Maindata.sort((a, b) => a.CostSort - b.CostSort);

Maindata.sort((a, b) => {
 // Do your calculation here

 if(a should be before b) {
    return -1;
  } else {
    return 1;
  }
}

Maindata.sort((a, b) => {
  let lenFamilies = a.costtable.length;
  for (let i = 0; i < lenFamilies; i++) {
    if (
      a.costtable[i].roomname.includes("Double") &&
      !b.costtable[i].roomname.includes("Double")
    ) {
      return -1;
    }
    if (
      !a.costtable[i].roomname.includes("Double") &&
      b.costtable[i].roomname.includes("Double")
    ) {
      return 1;
    }
    if (a.costtable[i].roomname.indexOf("Double") > -1) {
      for (let j = 0; j < a.costtable[i].family.length; j++) {
        if (a.costtable[i].family[j].type == 2) {
          a.costtable[i].family[j].cost - b.costtable[i].family[j].cost;
        }
      }
    }
  }
});