1

I am new to SPFx with react. I am creating a webpart to include a dropdown to have options from a choice column of a sharepoint online list. When loaded the dropdown from a static option values it works fine, however when loaded from a choice field from SPList which is set to state variable it gives the error message as enter image description here

requestTypeOptions is the only property in state.

Below are the code files DemoFormBaseWebpart.ts

export default class DemoFormWebpartWebPart extends BaseClientSideWebPart<IDemoFormWebpartWebPartProps> {
  public render(): void {
    const element: React.ReactElement<DemoFormWebpartProps> =
      React.createElement(DemoFormWebpart, {
        description: this.properties.description,
        context: this.context,
      });

    ReactDom.render(element, this.domElement);
  }

DemoFormWebpart.tsx

    import * as React from "react";
import styles from "./DemoFormWebpart.module.scss";
import { IDemoFormWebpartProps } from "./IDemoFormWebpartProps";
import { escape } from "@microsoft/sp-lodash-subset";
import {
  Dropdown,
  IDropdownOption,
  IDropdownStyles,
} from "office-ui-fabric-react";
import { IDemoFormWebpartState } from "./IDemoFormWebpartState";
import { sp } from "@pnp/sp";
import "@pnp/sp/lists";
import "@pnp/sp/webs";
import "@pnp/sp/items";
import "@pnp/sp/fields";
import { IList, List } from "@pnp/sp/lists";

export default class DemoFormWebpart extends React.Component<
  IDemoFormWebpartProps,
  IDemoFormWebpartState
> {
  private testList: IList;

  constructor(
    props: IDemoFormWebpartProps,
    state: IDemoFormWebpartState
  ) {
    super(props);
    sp.setup({
      spfxContext: this.props.context,
    });
    this.setState({
      reuestTypeOptions: [],
    });
  }

  componentWillMount() {
    this.testList = sp.web.lists.getByTitle("TestList");
    const choiceField =
      this.testList.fields.getByInternalNameOrTitle(
        "choiceField"
      );
    choiceField
      .select("Choices")
      .get()
      .then((optionsData) => {
        if (optionsData["Choices"]) {
          const choiceOptions = optionsData["Choices"].map(
            (item, i: number): IDropdownOption => {
              return { key: item, text: item };
            }
          );
          this.setState({
            reuestTypeOptions: choiceOptions,
          });
        }
      });
  }
  public render(): React.ReactElement<IDemoFormWebpartProps> {
    return (
      <div className={styles.demoFormWebpart}>
        <div className={styles.container}>
          <div className={styles.row}>
            <div className={styles.column}>
                <Dropdown
                  id="ddlRequestTypes"
                  label="Request Types"
                  options={this.state.reuestTypeOptions}
                />
              
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Noticed that options are loaded in the state variable, however render method is executed before loading of state variable.

Not sure what is happening. Please help me on this. Thank you. Below is package.json

enter image description here

1 Answer 1

0

The issue is in your component's constructor. Instead of using setState you will want to just set the state variable. So changing your constructor to the following should correct the error:

  constructor(
    props: IDemoFormWebpartProps,
    state: IDemoFormWebpartState
  ) {
    super(props);
    sp.setup({
      spfxContext: this.props.context,
    });
    this.state = {
      reuestTypeOptions: [],
    };
  }
1
  • Thanks a lot.. this resolved the issue although i had to clear browser cache to reflect the changes. Thanks @theChrisKent . Jan 28, 2022 at 17:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.