Javascript 在React&；中对数组值的单个索引进行排序；JSX

我试图对表中的行进行排序，并在状态动态变化但排序函数没有正确排序值的情况下，在给定“sortBy”值的情况下更改每一列。 该函数当前正在排序，但它对整个数组而不是所选的sortBy值进行排序。如何修复该函数，使其对单个列进行排序，而不是像现在一样对整个数组进行排序

这是我的状态：

state = {
  columnHeaders: ["Meat", "Protein", "Calories", "Carbohydrates", "Fat"],
  rows: [
    ["chicken breast", "25", "200", "37", "8"],
    ["fried chicken", "45", "450", "21", "16"],
    ["baked fish", "15", "250", "30", "9"]
  ],
  sortedBy: "",
  order: "desc",
  query: "all"
};



const { columnHeaders, rows, query, sortedBy, order } = this.state;

const newRows = query === "all" 
  ? rows
  : rows.filter(row => row[0].includes(query));

const sortedRows = sortedBy === ""
  ? newRows
  : newRows.sort((a, b) => {
   const valueA = a[columnHeaders.indexOf(sortedBy)];
   const valueB = b[columnHeaders.indexOf(sortedBy)];
    let sortedValue = 0;
    if (valueA < valueB) {
      sortedValue = -1;
    } else if (valueA > valueB) {
      sortedValue = 1;
    }
    if (order === "desc") {
      // if descending order, turn around the sort order
      sortedValue *= -1;
    }
    return sortedValue;
  });

状态={
列标题：[“肉”、“蛋白质”、“卡路里”、“碳水化合物”、“脂肪”]，
行：[
[“鸡胸肉”、“25”、“200”、“37”、“8”]，
[“炸鸡”、“45”、“450”、“21”、“16”]，
[“烤鱼”、“15”、“250”、“30”、“9”]
],
排序方式：“，
命令：“描述”，
查询：“全部”
};
const{columnheader，rows，query，sortedBy，order}=this.state；
const newRows=query==“全部”
? 排
：rows.filter（row=>row[0]。包括（查询））；
const sortedRows=sortedBy==“”
? 纽罗
：newRows.sort（（a，b）=>{
const valueA=a[columnHeaders.indexOf（sortedBy）]；
const valueB=b[columnHeaders.indexOf（sortedBy）]；
让sortedValue=0；
如果（值A<值B）{
sortedValue=-1；
}否则如果（值A>值B）{
sortedValue=1；
}
如果（顺序=“描述”）{
//如果是降序排列，请将排序顺序转过来
sortedValue*=-1；
}
返回排序值；
});

这是呈现sortedRows变量的映射

{
  sortedRows.map((row, i) => (
    <TableRow key={`thc-${i}`}>
      <TableItem row={row} />
    </TableRow>
  ));
}

{
sortedRows.map（（行，i）=>(
));
}

您可以使用检查列是数字列还是字符串列。如果该列是一个数字，则只需将其减去即可。Else用于对行进行排序

此外，我还添加了

slice

来复制数组，因为

sort

会对原始数组进行变异

const columnHeaders=[“肉”、“蛋白质”、“卡路里”、“碳水化合物”、“脂肪”]；
常量行=[
[“鸡胸肉”、“25”、“200”、“37”、“8”]，
[“炸鸡”、“45”、“450”、“21”、“16”]，
[“烤鱼”、“15”、“250”、“30”、“9”]
];
const sortedBy=“Meat”，order=“desc”；
const newRows=rows.slice（）.sort（（a，b）=>{
const valueA=a[columnHeaders.indexOf（sortedBy）]；
const valueB=b[columnHeaders.indexOf（sortedBy）]；
让sortedValue=0；
如果（！isNaN（valueA）&&！isNaN（valueB））
sortedValue=值A-值B
其他的
sortedValue=valueA.localeCompare（valueB）
如果（顺序=“描述”）{
sortedValue*=-1；
}
返回排序值；
})
console.log（newRows）

“16”>“8”

将为false，您需要通过解析或使用

+

解析sortedValue将其转换为int？或者const valueA&valueB？实现了这一点，但不幸的是，它给了我相同的结果，它过滤整个行数组而不是一列。您想只对一列进行排序，并将其余列保持在其以前的位置吗？这是指向组件的链接：，是的，只是尝试根据“sortBy”对一列进行排序随着onClick事件动态变化的状态我不明白你在问什么，对不起。这不会表明不同的

肉的营养成分不正确吗？是的，对不起，我有点累了，所以我没有做最好的示例。我希望此函数对单击的单个列进行排序。该列的名称存储在名为“sortBy”的状态下。此函数当前正在对整个行数组进行排序，但我希望它按照与sortBy值关联的索引进行排序，例如，如果sortBy：“Protein”我希望只对蛋白质列进行排序，而不是对整个内容进行排序