React - Handsontable datagrid: move columns and update status-PHP Chinese Network Q&A

I'm using a library for React and I have a list (array) of headers and on the other side an array containing the table data.

After reading the documentation I was able to enable the menu where I added the options "Add Column to Left" and "Add Column to Right" but this was only done visually and did not update the React state title.

I tried two methods. The second method is "Custom Dropdown Configuration", I added the columns manually and used the handsontable method "updateSettings" to update the title, but it still doesn't work(sometimes it works, sometimes it's elsewhere Add column).

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 })
          }
        },
}

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) } } }

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 }