Tutorial throws context is undefined error in SaveContext

Viewed 582

This may be a newbie problem, but I'm working though react-admin/Tutorial.html and when it comes to using the EditGuesser the 'Edit' page fails, reporting 'TypeError: context is undefined'. AFAIK, I've followed the instructions.

The error is reported after making the adjustment to introduce the 'edit={EditGuesser}' change in the 'Adding Creation and Editing Capabilities' section. I can see that the tutorial code has been edited, as the const definition of the dataProvider has been removed. Has something else also been removed?

If the error page is closed then the underlying page just states 'Something went wrong. A client error occurred and your request couldn't be completed.'

Any help is gratefully received.

The error details are:

TypeError: context is undefined
useSaveContext
prj_dir/node_modules/ra-core/esm/controller/details/SaveContext.js:23
  20 |  */
  21 | export var useSaveContext = function (props) {
  22 |     var context = useContext(SaveContext);
> 23 |     if (!context.save || !context.setOnFailure) {
  24 |         /**
  25 |          * The element isn't inside a <SaveContextProvider>
  26 |          * To avoid breakage in that case, fallback to props

which is kicked off from:

SaveButton
prj_dir/node_modules/ra-ui-materialui/esm/button/SaveButton.js:75
  72 | var notify = useNotify();
  73 | var translate = useTranslate();
  74 | var setOnSave = useContext(FormContext).setOnSave;
> 75 | var _d = useSaveContext(props), setOnSuccess = _d.setOnSuccess, setOnFailure = _d.setOnFailure, setTransform = _d.setTransform;
     | ^  76 | var handleClick = function (event) {
  77 |     // deprecated: use onSuccess and transform instead of onSave
  78 |     if (typeof onSave === 'function') {
2 Answers

It seems to be a problem with the EditGuesser. If you have inserted the code dump for PostEdit in your posts.js, you just need to replace EditGuesser with PostEdit:

// in src/App.js    
- import { Admin, Resource, EditGuesser } from 'react-admin';
+ import { Admin, Resource } from 'react-admin';
- import { PostList} from './posts';
+ import { PostList, PostEdit} from './posts';
import { UserList } from './users';

const App = () => (
  <Admin dataProvider={dataProvider}>    
  -  <Resource name="posts" list={PostList} edit={EditGuesser} />
  +  <Resource name="posts" list={PostList} edit={PostEdit} />
     <Resource name="users" list={UserList} />
  </Admin>
);
Related