Question

我正在使用Formik和React开发一个表单，该表单具有许多下拉字段。下拉字段的可用值存储在SharePoint列表中，并通过调用MS Graph获得。

问题是，对于React和整个现代JavaScript（我的背景是C＃），我还是一个新手。我确定我缺少某些东西，或者没有以正确的方式思考。问题在于，在呈现表单时，将呈现下拉列表，但实际上并未选择默认的选定键。这可能是因为MS Graph API调用异步运行，并且在React / Formik尝试设置所选键之后加载了可用值。然后，React / Formik不会尝试设置选定的键，因为我猜它仍在内部空列表中起作用。

我尝试在Graph回调中实现.then，因此在API调用完成后再次选择了选定的值，但这似乎效率不高（而且，我也无法使其正常工作-在获得可用选项之前，它仍然会尝试设置选定的键）。我在想最好的，最“正确的”方法是在渲染之前扩展组件以执行API调用，但是我真的不确定如何做到这一点。就像我说的那样，我还是这种编码方式的新手。

如果下面的代码缺少某些内容，我们深表歉意-除了上面提到的问题之外，我已经包括了我认为足以证明正在发生的事情以及它确实起作用的形式。

let AssetCategoryOptions = [];

async function graphAPICallbackAssetCategories(data) {
  const jsonData = JSON.parse(data);
  const valueData = jsonData["value"];
  if (valueData) {
    $.each(valueData, function(key, entry) {
      AssetCategoryOptions.push({
        key: entry.fields.Title,
        text: entry.fields.Title
      });
    });
  }
}

class Display extends Component {
  async componentDidMount() {
    const response = await acquireTokenPopupAndCallMSGraph(
      graphConfig.graphAssetCategoriesEndpoint,
      loginRequest,
      graphAPICallbackAssetCategories
    );
  }
  render() {
    return (
      <Fragment>
        <Field name="AssetCategoryId"
                  component={FormikDropdown}
                  label="Asset Category"
                  options={AssetCategoryOptions}
                  defaultSelectedKey={values.AssetCategoryId}
        />
      </Fragment>
    );
  }
}

在设置defaultSelectedKey之前，如何扩展Formik或React下拉组件以加载可用选项？

0 个答案: