Fix #3476: DataTable: TypeError when adding and starting editing a new row

[yanxiyue]

#3476

1. The cause seems to be that editingMeta was not initialized in this specific case.
2. editingMeta will be updated by useUpdateEffect hook, when BodyCell's editingState changed.
3. in this case, BodyCell is not mounted yet, so, the update logic will not be executed

Therefore，I try change useUpdateEffect to React.useEffect, it works well.

[github-actions]

Thanks a lot for your contribution! But, PR does not seem to be linked to any issues. Please manually link to an issue or mention it in the description using #<issue_id>.

[melloware]

You should not have to disable eslint?

[yanxiyue]

I didn't want to disable that, but I couldn't build it successfully, I'm not very familiar with react, please tell me how to do better

$ npm run build:lib

> primereact@8.7.3-SNAPSHOT build:lib
> NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package


> primereact@8.7.3-SNAPSHOT build:package
> npm run build:check && rollup -c && gulp build-resources && npm run build:api


> primereact@8.7.3-SNAPSHOT build:check
> npm run lint && npm run format:check && npm run type:check && npm run security:check && (NODE_ENV=test npm run test:check)


> primereact@8.7.3-SNAPSHOT lint
> next lint --max-warnings=0


./components/lib/datatable/BodyCell.js
473:8  Warning: React Hook React.useEffect has missing dependencies: 'editingKey', 'getCellCallbackParams', and 'props'. Either include them or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside React.useEffect.  react-hooks/exhaustive-deps

[melloware]

@yanxiyue thanks for the fix can you also comment on the ticket so then I can assign it to you?

[melloware]

@yanxiyue this should work...

    React.useEffect(() => {
        if (props.editMode === 'cell' || props.editMode === 'row') {
            const callbackParams = getCellCallbackParams();
            const params = { ...callbackParams, editing: editingState, editingKey };

            props.onEditingMetaChange(params);
        }
     // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [editingState]);

[yanxiyue]

@yanxiyue this should work...

    React.useEffect(() => {
        if (props.editMode === 'cell' || props.editMode === 'row') {
            const callbackParams = getCellCallbackParams();
            const params = { ...callbackParams, editing: editingState, editingKey };

            props.onEditingMetaChange(params);
        }
     // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [editingState]);

got it. fixed.