Javascript 在componentWillMount函数中更新的类级别变量在函数调用后在呈现方法中不可访问

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

请参阅下面代码中的以下代码行-

console.log（包括ocreqsig）//这会在日志中很好地打印对象，但不会在渲染功能中指定对象

它不适用于以下代码-

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>
    );
  }
}

下拉列表不获取任何值。原因可能是什么

当我尝试在函数之外执行赋值时，它工作得很好。所以这个范围发生了一些事情，也许

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>
    );
  }
}

导出类NwhERequestForm扩展React.Component{
//下拉变量
private includeDocReqSig:IControlDynamicReport={}；//的下拉值是否包括需要签名或法律审查的文档？
私人电子请求服务：电子请求服务；
私有appSettings:appSettings；
私人服务呼叫：NwhERequestFormRest；
//
const fundedBy:idropdownpoption[]=[
{键：'ocio'，文本：'ocio'}，
{key:'nonocio'，text:'Non-OCIO'}，
{键：'split'，文本：'split'}，
];
公共组件willmount（）：承诺{
this.eRequestService=新的eRequestService(
this.props.context.pageContext.web.absoluteUrl，
this.props.context.spHttpClient
);
this.appSettings=新的appSettings（）；
this.serviceCalls=new NwhERequestFormRest（this.eRequestService，this.appSettings）；
this.includeDocReqSig={options:fundedBy，disabled:false}；
返回承诺。解决（）；
}
public render（）：React.ReactElement{
返回(
{this.props.description}
如果您需要帮助，请单击此处
基本信息
);
}
}

您忘记等待提取结束：

// 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
}

//将函数标记为异步
公共异步组件willmount（）：承诺{
this.eRequestService=新的eRequestService(
this.props.context.pageContext.web.absoluteUrl，
this.props.context.spHttpClient
);
this.appSettings=新的appSettings（）；
this.serviceCalls=new NwhERequestFormRest（this.eRequestService，this.appSettings）；
//等待取货↓↓↓↓↓
this.includeDocReqSig=等待此.serviceCalls.\u getFieldChoice（“需要签名”，true）；
console.log（包括ocreqsig）；
//返回承诺。解决（）；← 这一行是可选的，因为函数被标记为异步
}

但是我建议使用状态管理器而不是类属性

---

例如，使用Redux，您将能够检测下拉列表选项中的更改。现在，由于属性不在React循环中，无法检测到更改。

Hi Baboo\uz，感谢您的回复。我已经尝试将函数定义更改为async并添加了Wait，但render方法仍然没有获得includeDocReqSig的更新值。问题是React没有关于

includeDocReqSig

更新的线索。将变量移动到组件的状态，以便可以使用

setState

// 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
}