SPFX React Context not available

Question

When using Rest API get list item with the code snippet below, I can't get items displayed:

  private _getListData(): Promise<ISPLists> {
    return this.context.spHttpClient.get(this.props.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbyTitle('MyList')/items`, SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse) => {
        return response.json();
      });
  }

I'm using React framework and the code snippet above is from SPFX official demo, what's wrong with it ? Can someone help please.

Answer 1

On debugging, put a breakpoint on return response.json() statement and check what you get in response.json(). If you are getting your sharepoint list data, that means whatever you are doing after the data is returned is wrong. If you do not get sharepoint list data, then check the API URL (verify whether list name is right) or you have ATLEAST READ permissions on the list.

---

Please remember to up-vote & mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].

Answer 2

Hi zhuw12,

If you are using React Framework, it's a little different with No JavaScript Framework, please define Context in Props.ts:

import { WebPartContext } from "@microsoft/sp-webpart-base";

export interface IReactSpfxProps {
  description: string;
  context: WebPartContext;
}

Then in tsx, reference and use like this:

import { IReactSpfxProps } from './IReactSpfxProps';

  private _getListData(): Promise<ISPLists> {
    return this.props.context.spHttpClient.get(this.props.context.pageContext.web.absoluteUrl + `/_api/web/lists/getbyTitle('MyList')/items`, SPHttpClient.configurations.v1)
      .then((response: SPHttpClientResponse) => {
        return response.json();
      });
  }

Thanks

Best Regards

---

Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact [e-mail].

SharePoint Server 2019 has been released, you can click here to download it.
Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

Answer 3

Jerry,

That worked. Thanks so much :)