Question

我在代码库中创建了以下react类，并尝试在render方法中使用变量 includeDocReqSig 。

请参考以下代码中的以下代码行-

console.log（this.includeDocReqSig）; //这样可以在日志中很好地打印对象，但不会在渲染功能中分配对象

它不适用于以下代码-

export class NwhERequestForm extends React.Component<INwhERequestFormProps, {}> {
  // Dropdown Variables
  private includeDocReqSig: IControlDynamicProp = {}; // Dropdown value for Does this include documents that requires signature or legal review?

  private eRequestService: ERequestService;
  private appSettings: AppSettings;
  private serviceCalls: NwhERequestFormRest;

  //

  public componentWillMount(): Promise<void> {


    this.eRequestService = new ERequestService(
      this.props.context.pageContext.web.absoluteUrl,
      this.props.context.spHttpClient
    );
    this.appSettings = new AppSettings();
    this.serviceCalls = new NwhERequestFormRest(this.eRequestService, this.appSettings);

    this.serviceCalls._getFieldChoice("Signature_x0020_Required", true).then(
      (val: IControlDynamicProp) => {
        this.includeDocReqSig = { options: val.options, disabled: val.disabled };
       console.log(this.includeDocReqSig); //This print the objects pretty fine in the logs but not get assigned in render function
      });
    return Promise.resolve();
  }

  public render(): React.ReactElement<INwhERequestFormProps> {
    return (
      <div className={styles.nwhERequestForm} >
        <div className={styles.container}>
          <div className={styles.title}> {this.props.description} </div>
          <div className={styles.subtitle}> If you need assistance, please click here </div>
          <form>
            <div className={styles.mainformdiv}>
              <fieldset className={styles.fieldset}>
                <legend className={styles.legend}>Basic Information</legend>
                <div className={styles.row}>
                  <DropdownControl
                    staticProp={{ labelTitle: 'Does this include a Vendor document that requires signature or requires legal review?', required: true }}
                    dynamicProp={this.includeDocReqSig} />
                  <DropdownControl
                    staticProp={{ labelTitle: 'Is this related to an OCIO Project?', required: true }}
                    dynamicProp={{ options: signatureRequiredLegal }} />
                </div>               
              </fieldset>            
            </div>
          </form>
        </div>
      </div>
    );
  }
}

_getFieldChoice函数在另一个ts文件中定义：

 public _getFieldChoice = async (columnName: string, isDisabled: boolean, ) => {
        let controlProp: IControlDynamicProp = {};
        let dropdownValue: IDropdownOption[] = [];
        const fieldChoices: IDropdownValues[] = await this.eRequestService.getFieldDDValue(this.appSettings.eRequestListName, columnName);
        fieldChoices[0].Choices.forEach(element => {
            dropdownValue.push({ key: element, text: element });
        });
        controlProp = { options: dropdownValue, disabled: isDisabled };        
        return controlProp;
    }

该下拉列表没有任何值。可能是什么原因？

当我尝试在函数外部进行分配时，它可以正常工作。因此，范围可能正在发生变化？

export class NwhERequestForm extends React.Component<INwhERequestFormProps, {}> {
  // Dropdown Variables
  private includeDocReqSig: IControlDynamicProp = {}; // Dropdown value for Does this include documents that requires signature or legal review?

  private eRequestService: ERequestService;
  private appSettings: AppSettings;
  private serviceCalls: NwhERequestFormRest;

  //

  const fundedBy: IDropdownOption[] = [
    { key: 'ocio', text: 'OCIO' },
    { key: 'nonocio', text: 'Non-OCIO' },
    { key: 'split', text: 'Split' },
  ];

  public componentWillMount(): Promise<void> {


    this.eRequestService = new ERequestService(
      this.props.context.pageContext.web.absoluteUrl,
      this.props.context.spHttpClient
    );
    this.appSettings = new AppSettings();
    this.serviceCalls = new NwhERequestFormRest(this.eRequestService, this.appSettings);

    this.includeDocReqSig = { options: fundedBy, disabled: false };

    return Promise.resolve();
  }

  public render(): React.ReactElement<INwhERequestFormProps> {
    return (
      <div className={styles.nwhERequestForm} >
        <div className={styles.container}>
          <div className={styles.title}> {this.props.description} </div>
          <div className={styles.subtitle}> If you need assistance, please click here </div>
          <form>
            <div className={styles.mainformdiv}>
              <fieldset className={styles.fieldset}>
                <legend className={styles.legend}>Basic Information</legend>
                <div className={styles.row}>
                  <DropdownControl
                    staticProp={{ labelTitle: 'Does this include a Vendor document that requires signature or requires legal review?', required: true }}
                    dynamicProp={**this.includeDocReqSig**} />
                  <DropdownControl
                    staticProp={{ labelTitle: 'Is this related to an OCIO Project?', required: true }}
                    dynamicProp={{ options: signatureRequiredLegal }} />
                </div>               
              </fieldset>            
            </div>
          </form>
        </div>
      </div>
    );
  }
}

Answer 1

您忘了等待提取完成：

// Mark the function as async
public async componentWillMount(): Promise<void> {
  this.eRequestService = new ERequestService(
    this.props.context.pageContext.web.absoluteUrl,
    this.props.context.spHttpClient
  );
  this.appSettings = new AppSettings();
  this.serviceCalls = new NwhERequestFormRest(this.eRequestService, this.appSettings);

  // Wait for the fetch   ↓↓↓↓↓
  this.includeDocReqSig = await this.serviceCalls._getFieldChoice("Signature_x0020_Required", true);
  console.log(this.includeDocReqSig);

  // return Promise.resolve(); ← This line is optional since the function is marked as async
}

但是我建议使用状态管理器代替类属性。

例如，使用Redux，您将能够检测到下拉菜单选项的变化。到目前为止，由于属性不在React循环之外，因此无法检测到更改。

函数调用后，在renderWrite方法中无法访问componentWillMount函数内部更新的类级别变量

1 个答案: