Deleting object column from Dropdown menu throwing error

Tags: #<Tag:0x00007efc64979250>

I would post code for this, but I’m using some custom react components.

I am using the react wrapper and have some custom renderer & editor columns as part of my grid.
I had been using an external button to “Delete” a column, which refreshes the column collection and re-renders grid. This work fine.

However, I recently added a a custom dropdown menu with the option to “Delete” column. This calls the same function as the button does, however, upon refreshing the grid, I get “Warning: Can’t perform a React state update on an unmounted component”. This only happens if one of the columns is using the custom React component…otherwise it deletes fine.

I realize without the code, it’s hard to debug, but curious if any of your react developers have run into an issue like this (IE custom react editor and calling “Delete Column” method from dropdown menu).

Just another bit of info on this. It actually only happens when the column you are deleting is the one right after the column that uses the custom editor. If you delete the column before this one, or 2 over to the right, it’s not an issue. I can reproduce with the colorpicker react example that is on the webiste, will try to get jsfiddle code updated to show.


Updated. I got a simple version of this working in codesandbox

  1. Click the “load table” button.
  2. From dropdown menu, click “Delete last”. This will throw the error. If the column referencing the custom editor is last column, you get error
  3. Reload and click “delete first”, it will remove first row, and this time, no error.

Let me know if you need additional details to debug.

Thank you for sharing the code. I will investigate this case and update you.

Hi @mhennessy7

sorry that it took so long but I’m finally here with the answer and I hope that it will fit your requirements.

I’ve asked our developer to investigate this case and this is what I got

first we need to check and make sure that td and
this.editorRef.current exist in ~colorPicker` file. After checking it, everything works fine

https://codesandbox.io/s/advanced-handsontablereact-implementation-using-hotcolumn-dem4m