Как расширить раскрывающийся компонент Formik или React для загрузки доступных параметров перед установкой defaultSelectedKey? - PullRequest
Новая
       9

Как расширить раскрывающийся компонент Formik или React для загрузки доступных параметров перед установкой defaultSelectedKey?

0 голосов
/ 08 июля 2019

Я разрабатываю форму с использованием Formik и React, и в этой форме есть несколько раскрывающихся полей. Доступные значения раскрывающихся полей хранятся в списке SharePoint и получаются с помощью вызова MS Graph.

Проблема в том, что я все еще новичок в React и в современном JavaScript в целом (мой опыт работы с C #). Я уверен, что что-то упустил, или не думаю, что правильно. Проблема заключается в том, что при визуализации формы отображается выпадающий список, но выбранный по умолчанию ключ фактически не выбран. Вероятно, это связано с тем, что вызов API MS Graph выполняется асинхронно, а доступные значения загружаются ПОСЛЕ того, как React / Formik пытается установить выбранный ключ. React / Formik затем не пытается установить выбранный ключ, потому что я думаю, что он все еще работает внутри из пустого списка опций.

Я попытался реализовать .then в обратном вызове Graph, поэтому выбранное значение снова выбирается после завершения вызова 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>
    );
  }
}
...