CODEWITHSUNDEEP
reactjsreact-reduxadmin-on-rest
gyss
gyss

Reputation: 1843

undefined in store when <Edit> data from <List>

I have a very simple users list with Admin On Rest (version 1.1.0).

<Admin authClient={authClient} restClient={restClient}>
    <Resource name="users" list={UsersList} edit={UsersEdit} />
</Admin>

This performs a GET request to https://example.com/api/users?_sort=id&_order=DESC&_start=0&_end=25 where I return a list of users with the data only needed for rendering the list.

When I edit one of these users a GET request is performed to fetch all the data of that specific user https://example.com/api/users/3ba7141c-03d2-4234-9031-76bf88ca7454.

But, for some reason, the data fetched is being stored in a undefined field inside the Redux store:

{
  admin: {
    users: {
      data: {
        3ba7141c-03d2-4234-9031-76bf88ca7454: {
          // data returned from /users
        },
        undefined: {
          // data fetched from /users/3ba7141c-03d2-4234-9031-76bf88ca7454
        }
      }
    }
  }
}

Due to this bug I can't render correctly my form:

<Edit title="Edit" {...props}>
  <SimpleForm>
    {/*
       this one renders correctly as the Id is present in the `/users` request
    */}
    <DisabledInput label="Id" source="id" />
    {/*
       this one renders no content as it cannot find the new data from `/users/3ba...`
       (probably because of the undefined in the store)
    */}
    <TextInput label="email" source="account.email" validate={required} />
  </SimpleForm>
</Edit>

Is this a bug in the library of maybe I missed some configuration?

NOTE: this is the rest client definition I'm using (code from the documentation)

const httpClient = (url, options = {}) => {
  if (!options.headers) {
    options.headers = new Headers({ Accept: 'application/json' });
  }
  const token = localStorage.getItem('token');
  options.headers.set('Authorization', `Bearer ${token}`);
  return fetchUtils.fetchJson(url, options);
}
const restClient = jsonServerRestClient('https://example.com/api', httpClient);

Upvotes: 1

Views: 99

Answers (1)

wesley6j
wesley6j

Reputation: 1403

I think the fetched data does not have an id field. You can verify this by checking this section of redux store:

undefined: {
   // data fetched from /users/3ba7141c-03d2-4234-9031-76bf88ca7454
}

You can fix it from backend by adding id field.

Upvotes: 2

Related Questions