Javascript 在react js中隐藏和显示元素（按列排序）

我正在处理一项任务（基于列的排序）。我有5到6个专栏。即

日期

类型

贷记金额

借记金额

贷方余额

借方余额

我的要求是，一旦用户单击3）贷记金额和4）借记金额，就隐藏6）借方余额和5）贷方余额的值。这将以升序发生

如果用户再次单击它，它将按降序排列。当时我想显示（5和6）的列值

简单来说，升序时我想隐藏（5和6）的列值，而降序时我想显示列值

到目前为止，我得到的是升序值被隐藏。但按降序我无法得到值。谁能指导我实现这一目标

我的代码如下

const columns = [{
    "key": "date",
    "name": "Date",
    "isSort": true
  },
  {
    "key": "type",
    "name": "Type",
    "isSort": true
  },

  {
    "key": "CreditedAmount",
    "name": "CAmount",
    "isSort": true
  },
  {
    "key": "DebitedAmount",
    "name": "DAmount",
    "isSort": true
  },

  {
    "key": "CreditBalance",
    "name": "CBal",
  },
  {
    "key": "DebitBalance",
    "name": "DBal",
  },
]

const [col, setCol] = useState(columns)
const Rows = props.contractDetails; //I am getting data from this props
const TotalDetails = props.totalCount

function SortingRow(rows, col, sortMethod) {
  let sortRow = ((sortMethod === "ASC") ?
    rows.map(contractDet) => {
      if ((col === "type") || (col === "creditedAmount") || (col === "DebitedAmount"))
        contractDet.CreditBalance = " "
      contractDet.DebitBalance = " "
    } else {
      return contractDet
    }): rows
  return sortMethod ?
    sortRow
    .slice()
    .sort(
      ({
        [col]: a
      }, {
        [col]: b
      }) =>
      (a === b ? 0 : a < b ? -1 : 1) *
      (sortMethod === "ASC" ? 1 : -1)
    ) :
    rows
}

const rows = col
  .slice()
  .reverse()
  .reduce(
    (sortedRows, {
      key: col,
      isSort,
      sortMethod
    }) =>
    isSort ? SortingRow(sortedRows, col, sortMethod) : sortedRows,
    Rows
  );

return (

  rows = {
    rows
  }
  col = {
    col
  }
  onSort = {
    (col, sortMethod) => setCol(
      cols.map(cl =>
        c.key === col ? Object.assign({}, cl, {
          sortMethod
        }) :
        cl
      )
    )
  }
)

const列=[{
“键”：“日期”，
“姓名”：“日期”，
“isSort”：正确
},
{
“键”：“类型”，
“名称”：“类型”，
“isSort”：正确
},
{
“密钥”：“CreditedAmount”，
“名称”：“卡蒙特”，
“isSort”：正确
},
{
“键”：“借记金额”，
“名称”：“DAmount”，
“isSort”：正确
},
{
“密钥”：“贷方余额”，
“名称”：“CBal”，
},
{
“键”：“借记余额”，
“名称”：“DBal”，
},
]
const[col，setCol]=useState（列）
const Rows=props.contractDetails//我正在从这个道具上获取数据
const TotalDetails=props.totalCount
函数排序行（行、列、排序方法）{
让sortRow=（（sortMethod==“ASC”）？
行。映射（contractDet）=>{
如果（（列==“类型”）| |（列==“贷记金额”）| |（列==“借记金额”））
contractDet.CreditBalance=“”
contractDet.DebtBalance=“”
}否则{
退货合同
})：行
还击方法？
索特罗
.slice（）
.分类(
({
[上校]：a
}, {
[上校]：b
}) =>
（a==b？0:a
isSort？SortingRow（sortedRows，col，sortMethod）：sortedRows，
排
);
返回(
行={
排
}
列={
上校
}
onSort={
（col，sortMethod）=>setCol(
cols.map（cl=>
c、 key==col？Object.assign（{}，cl{
巫术
}) :
氯
)
)
}
)

我不知道发生了什么事。您列出了6列，但讨论了隐藏和显示第6列和第7列。在另一件事上，我强烈建议在任何地方都要使用花括号和分号，而不是只在某些地方使用。@异端猴子我很抱歉这是一个打字错误。我想隐藏和显示第5列和第6列的值。当然我会用大括号和分号。嗨@Kumar，我不明白你的代码语法

return（…）

，你想返回JSX吗？@Nur，是的，我有一个包含数据的表。我刚才提到了我的排序代码，没有包括表的代码。