Убедитесь, что родительский элемент отображается только тогда, когда все дочерние элементы загружены

Основная проблема здесь заключается в том, что у вас есть два компонента, которые имеют строгие иерархические отношения рендеринга (родительский -> дочерний), но равную ответственность за выборку данных.

Это приводит к ситуации, когда вы должны реагировать на получение данных между несколькими компонентами в определенном порядке, что является нетривиальной проблемой параллелизма. Одним из решений было бы использовать контейнер общего состояния (с использованием Redux или Контекстный API) и чтобы оба компонента сохраняли свои результаты в этом сегменте общего состояния, а затем, когда в контейнере есть все данные, вы их представляете (до тех пор, пока вы можете показывать счетчик Например).

Более простым решением было бы просто переместить выборку в один из компонентов, полностью исключить эту разделенную ответственность за выборку данных и позволить компоненту, извлекающему данные, также контролировать рендеринг.

Один из способов - получить все данные в родительском элементе, а дочерний элемент будет просто чистым компонентом, который отображается при получении данных:

class Arrival extends React.Component {
  // ...

  async componentDidMount() {
    const [formData, options] = await Promise.all([
      fetch(urls.addEditUrl).then(response => response.json()),
      fetch(URLS.GetServerData).then(response => response.json())
    ]);

    this.setState({ formData, options });
  }

  render() {
    const { formData, options } = this.state;
    return (
      <Form>
        {/* ... */}
        {formData &&
          options && (
            <Selector
              label = "select"
              options = {this.state.options}  {/* pass the options here */}
              onChange = {this.UpdateFormSelectData.bind(
                this,
                "selectedServerDataId"
              )}
              value = {formData.selectedServerDataId}
            />
          )}
      </Form>
    );
  }
}

Selector теперь является только презентационным компонентом, без необходимости указывать:

const ServerDataSelector = props => (
  <FormItem {...formItemLayout} label = {t(this.props.label)}>
    <Select
      setValue = {this.props.onChange}
      getValue = {() => this.props.value}
      selectedOption = {this.props.value}
      name = {this.props.label}
    >
      {this.props.options.map(d => (     {/* use props.options */}
        <Option key = {d.id} value = {d.id}>
          {d.value}
        </Option>
      ))}
    </Select>
  </FormItem>
);

При желании вы можете показать счетчик или индикатор загрузки:

...
{
  formData && options ? (
    <Selector
      label = "select"
      onChange = {this.UpdateFormSelectData.bind(this, "selectedServerDataId")}
      options = {this.state.options}
      value = {formData.selectedServerDataId}
    />
  ) : (
    <Spinner />
  );
}

В качестве альтернативы вы можете попросить ребенка получить все данные, а родитель просто отобразит ребенка.

class ServerDataSelector extends React.Component {
  // ...

  async componentDidMount() {
    const [formData, options] = await Promise.all([
      fetch(urls.addEditUrl).then(response => response.json()),
      fetch(URLS.GetServerData).then(response => response.json())
    ]);

    this.setState({
      value: formData.selectedServerDataId,
      options
    });
  }

  render() {
    return (
      <FormItem {...formItemLayout} label = {t(this.props.label)}>
        <Select
          setValue = {this.props.onChange}
          getValue = {() => this.state.value}  {/* use the value from the state */}
          selectedOption = {this.state.value}  {/* use the value from the state */}
          name = {this.props.label}
        >
          {this.state.options.map(d => (
            <Option key = {d.id} value = {d.id}>
              {d.value}
            </Option>
          ))}
        </Select>
      </FormItem>
    );
  }
}

Вы также можете добавить в дочерний элемент счетчик, чтобы предотвратить рывки страниц и улучшить UX:

render() {
  if (!this.state.value || !this.state.options) {
    return <Spinner />;
  }

  return (
    <FormItem {...formItemLayout} label = {t(this.props.label)}>
      <Select
        setValue = {this.props.onChange}
        getValue = {() => this.state.value}
        selectedOption = {this.state.value}
        name = {this.props.label}
      >
        {this.state.options.map(d => (
          <Option key = {d.id} value = {d.id}>
            {d.value}
          </Option>
        ))}
      </Select>
    </FormItem>
  );
}

После многих попыток и ошибок я нашел способ исправить это.

В моем родительском состоянии я добавил следующий объект:

this.state = {
            formData: null,
            loadedComponents: {
                parentComponentIsLoaded: false,
                childComponent1IsLoaded: false,
                childComponent2IsLoaded: false,
            }
        };

Затем я добавил следующие 2 метода в свой родительский

   componentLoaded = (field, data) => {
    const { loadedComponents } = this.state;
    var fieldName = field + "IsLoaded";

    this.setState({ loadedComponents: { ...loadedComponents, [fieldName]: true } });
}

allComponentsLoaded() {

    const { loadedComponents } = this.state;
    console.info(loadedComponents);
    for (var o in loadedComponents) {
        if (!loadedComponents[o]) return false;
    }
    return true;
}

Изменил метод рендеринга на это:

        return (
        formData ?
            <Form className = {this.allComponentsLoaded() ? '' : 'hidden'} >
                <ChildComponet1 {someprops} isLoaded = {this.componentLoaded}/>
                <ChildComponent2 {someprops} isLoaded = {this.componentLoaded}/>
            <snip />
        </Form> : <div />);

И добавил следующую строку в методе childs componentDidMount после выборки данных.

this.props.isLoaded('childComponet1', true)

Возможно, это очень плохой дизайн реакции, и если вы действительно используете ответ MEM035, но он работает