React - Handsontable数据网格：移动列并更新状态

Question

我正在使用React的库，我有一个标题的列表（数组），另一边是一个包含表格数据的数组。

阅读文档后，我能够启用菜单，其中我添加了“在左侧添加列”和“在右侧添加列”的选项，但这只是在视觉上完成的，并没有更新React状态中的标题。

我尝试了两种方法。 第二种方法是“自定义下拉菜单配置”，我手动添加了列，并使用handsontable方法“updateSettings”来更新标题，但它仍然不起作用（有时它起作用，有时它在其他地方添加列）。

function addToHeader (array, index, side, valor) {
  if (side === "Left") array.splice(index, 0, valor)
  else if (side === "Right") array.splice(index + 1, 0, valor)
  return array
}

在代码中：
dropdownMenu: {
      items: {
        col_right: {
          name: 'Move column right',
          callback: (key: any, selection: any, clickEvent: any) => {
            const column = selection[0].end.col
            headers = addToHeader(headers, column, "Right", 'New column')
            console.log('headers', headers) // 返回正确更改的数组
            hot.updateSettings({ colHeaders: headers })
          }

        },
        col_left: {
          name: 'Move column left',
          callback: (key: any, selection: any, clickEvent: any) => {
            const column = selection[0].end.col
            headers = addToHeader(headers, column, "Left", 'New column')
            console.log('headers', headers) // 返回正确更改的数组
            hot.updateSettings({ colHeaders: headers })
          }
        },
}

Answer 1

我按照以下方式完成了这个任务：

afterColumnMove: (
  movedColumns: number[],
  finalIndex: number,
  dropIndex: number | undefined,
  movePossible: boolean,
  orderChanged: boolean
) => {
  if (orderChanged) {
    let ht
    if (hotRef.current) ht = hotRef.current.hotInstance
    if (ht) {
      const headers = ht.getColHeader()
      const colMoved = movedColumns[0]
      setHeaders(prevHeaders => headers as string[]) // 这样如果你更新了状态
      const newOrderData = moveColumnTable(list, finalIndex, colMoved)
      setList(prevData => newOrderData)
      ht.loadData(list)
    }
  }
}

关键是，我之前没有意识到的是，除了表头的状态没有被更新之外，当移动列时，表格数据也必须被更新，这就是我实现一个js函数来移动信息的地方（moveColumnTable）

const moveColumnTable = (tableData: any[], fromIndex: number, toIndex: number) => {
  if (toIndex === fromIndex || toIndex < 0 || fromIndex < 0) {
    // 如果起始索引等于结束索引或者它们是无效值，那么就没有变化。
    return tableData
  }

  const reorderedTableData = tableData.map(row => {
    const newRow = [...row]
    const movedItem = newRow.splice(toIndex, 1)[0]
    newRow.splice(fromIndex, 0, movedItem)

    return newRow
  })

  return reorderedTableData
}

重要提示：我实现了这个函数来移动单个列