Duplicate keys warning generated when redirecting to List after saving in Edit form

[ashkart]

When i save Edit form its all going ok untill redirect back in List of items. Redirect itself succeeds successfully, but in console there is warning generated. It seems App thinks that there Create operation was just performed, not Edit.

warning.js:33 Warning: Encountered two children with the same key, 32. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. in tbody (created by TableBody) in TableBody (created by WithStyles(TableBody)) in WithStyles(TableBody) (created by DatagridBody) in DatagridBody (created by shouldUpdate(DatagridBody)) in shouldUpdate(DatagridBody) (created by Datagrid) in table (created by Table) in Table (created by WithStyles(Table)) in WithStyles(Table) (created by Datagrid) in Datagrid (created by WithStyles(Datagrid)) in WithStyles(Datagrid) (created by VacancyList) in div (created by ListView) in div (created by Paper) in Paper (created by WithStyles(Paper)) in WithStyles(Paper) (created by Card) in Card (created by WithStyles(Card)) in WithStyles(Card) (created by ListView) in div (created by ListView) in ListView (created by ListController) in ListController (created by TranslatedComponent(undefined)) in TranslatedComponent(undefined) (created by Connect(TranslatedComponent(undefined))) in Connect(TranslatedComponent(undefined)) (created by List) in List (created by WithStyles(List)) in WithStyles(List) (created by VacancyList) in VacancyList (created by WithPermissions) in WithPermissions (created by Connect(WithPermissions)) in Connect(WithPermissions) (created by getContext(Connect(WithPermissions))) in getContext(Connect(WithPermissions)) (created by Route) in Route (created by Resource) in Switch (created by Resource) in Resource (created by Connect(Resource)) in Connect(Resource) (created by Application) in Route (created by RoutesWithLayout) in Switch (created by RoutesWithLayout) in RoutesWithLayout (created by Route) in div (created by Layout) in main (created by Layout) in div (created by Layout) in div (created by Layout) in Layout (created by WithStyles(Layout)) in WithStyles(Layout) (created by Connect(WithStyles(Layout))) in Connect(WithStyles(Layout)) (created by LayoutWithTheme) in MuiThemeProvider (created by LayoutWithTheme) in LayoutWithTheme (created by Route) in Route (created by CoreAdminRouter) in Switch (created by CoreAdminRouter) in div (created by CoreAdminRouter) in CoreAdminRouter (created by Connect(CoreAdminRouter)) in Connect(CoreAdminRouter) (created by getContext(Connect(CoreAdminRouter))) in getContext(Connect(CoreAdminRouter)) (created by Route) in Route (created by CoreAdmin) in Switch (created by CoreAdmin) in Router (created by ConnectedRouter) in ConnectedRouter (created by CoreAdmin) in TranslationProvider (created by withContext(TranslationProvider)) in withContext(TranslationProvider) (created by Connect(withContext(TranslationProvider))) in Connect(withContext(TranslationProvider)) (created by CoreAdmin) in Provider (created by CoreAdmin) in CoreAdmin (created by withContext(CoreAdmin)) in withContext(CoreAdmin) (created by Application) in Application

Despite that warning, edited record is successfully updated in the List.

Here my dataProvider response data extraction code:

const extractDataFromHttpResponse = (response, type, resource, params) => {
        return response.json().then((json => {
            switch(type) {
                case GET_LIST:
                    let total = json.totalItems;
                    delete json.totalItems;

                    return {
                        data: Object.values(json),
                        total: total,
                    };

                case CREATE:
                    return {
                        data: Object.assign({}, params.data, { id: json.id })
                    };

                default:
                    return { data: json };
            }
        }));
    };

Here my Application class code:

const Application = () => (
    <Admin dataProvider={dataProvider}>
        <Resource name='vacancy' show={VacancyShow} list={VacancyList} edit={VacancyEdit} create={VacancyCreate} />
        <Resource name='user' list={UserList} />
    </Admin>
);

This is Edit form code:

export default class VacancyEdit extends React.Component {
    render() {
        return (
            <Edit {...this.props}>
                <SimpleForm>
                    <DisabledInput source="id" />
                    <LongTextInput source="position_name"/>
                    <RichTextInput source="requirements"/>
                    /*..other inputs.*/
                </SimpleForm>
            </Edit>
        );
    }
}

And the List:

export default class VacancyList extends React.Component {
    render() {
        return (
            <List {...this.props} perPage={10}>
                <Datagrid>
                    <TextField source="position_name" />
                    <TextField source="requirements" />
                    <TextField source="liabilities" />
                    <TextField source="conditions" />
                    <TextField source="description" />
                    <PaycheckField source="paycheck" />
                    <EditButton basePath="/vacancy" />
                </Datagrid>
            </List>
        );
    }
}

[fzaninotto]

Can't reproduce it in the example app. Can you fork this CodeSandbox and tweak it until you manage to reproduce your issue?

[ashkart]

i just tried to do that, but there isnt any warnings. It seems our react-admin versions a bit different.

https://codesandbox.io/s/w6r3x5nk6k

The warning itself generated in react-dom: react-dom.development.js:7744 knownKeys = warnOnInvalidKey(child, knownKeys);

Seems we shouldnt get in this place at all.

[fzaninotto]

OK, I'm closing the issue then. Feel free to reopen if you manage to reproduce the bug.

[swalihkdan]

I have this same issue, is there any solution for this

[ucefkh]

@fzaninotto c'est toujours un bug en 2023!!!! is always happening cmon

here is a screenshot

[djhi]

@ucefkh If you want us to investigate then provide a codesandbox showing the issue.

[ucefkh]

Bro, use react admin-firebase and set lazyMode:true that's it!

I can't share my Firebase app publicly so you can try it

Look how bad this is!

It is affecting us so much and I knew this bug for a few years now that was never fixed

[ucefkh]

https://github.com/benwinding/react-admin-firebase/issues/272