javascript - HOC 在没有组件状态的情况下返回

Question

我有以下内容：

import React, { useEffect, useState } from 'react';
import withMaterialTable from '../../../components/MaterialHOCTable/MaterialHOCTable';
import DateCellRenderer from '../../../components/CellRenderers/DateCellRenderer';
import { buildApiUrl, buildFetchRequest, handleFailedFetchRequests } from '../../../common/fetch';
import ValidationUtils from '../Utils/validation.utils';
import TextUtils from '../Utils/text.utils';

const SelfServeSource = () => {
  const [additionalProps, setAdditionalProps] = useState({ languages: {}, platforms: {} });

  const prepareLanguages = async () => {
    const languagesJson = localStorage.getItem('feedsLanguages');
    let languagesArr;
    if (!ValidationUtils.isExists(languagesJson)) {
      const res = await fetch(buildApiUrl('self-serve-sources/ui-props', true, false), buildFetchRequest('GET'));
      await handleFailedFetchRequests(res);
      const metaData = await res.json();
      languagesArr = metaData.feedsLanguages;
      localStorage.setItem('feedsLanguages', JSON.stringify(metaData.feedsLanguages));
    } else {
      languagesArr = JSON.parse(languagesJson);
    }

    const langObj = TextUtils.setLanguages(languagesArr);
    setAdditionalProps({ languages: langObj });
  };

  const prepareData = async () => {
      await prepareLanguages();
  };

  useEffect(() => {
    prepareData();
  }, []);

  const initialFormState = {
    languages: additionalProps.languages,
    source: {
      isConnected: false,
      deleteAfterImport: false,
      importParticipantsNames: false,
    },
  };

  const tableProperties = {
    name: 'Sources',
    columns: {
      id: {
        disablePadding: false,
        label: 'ID',
        sortable: true,
      },
      lang: {
        disablePadding: false,
        label: 'Language',
        sortable: true,
        cellRenderer: ({ value }) => additionalProps.languages[value] ?? value,
      },
      updatedBy: {
        disablePadding: false,
        label: 'Updated By',
        sortable: true,
      },
      updateDate: {
        disablePadding: false,
        label: 'Updated Date',
        sortable: true,
        cellRenderer: DateCellRenderer,
      },
    },
  };

  const modalProperties = {
    initialState: initialFormState,
    tabs: [{
      additionalProps,
    }],
  };

  const HocTable = withMaterialTable('Sources', tableProperties, modalProperties);
  return <HocTable />;
};

export default SelfServeSource;

由于某种原因：cellRenderer: ({ value }) => additionalProps.languages[value] ?? value，返回value而不是状态值additionalProps.languages[value]，调试后我意识到 HOC 在状态初始化之前渲染。
我能解决这个问题吗？
谢谢。

更新：

这是 'withMaterialTable' HOC 定义：

const withMaterialTable = (entityName, baseEndpoint, baseUiUrl, tableProps, modalProps) => {
    return withRouter((props) => {
        const classes = useStyles();

        const LoadingComp = () => <LoadingSpinner isLoading />;

        useEffect(() => {
            const containers = document.getElementsByClassName('container-fluid');
            const container = containers?.length ? containers[0] : null;

            if (containers) {
                container.style.padding = '0';
            }

            return () => {
                if (container) {
                    container.style.padding = null;
                }
            };
        });

        return (
            <Switch>
                <Route
                    path={`/${baseUiUrl}/new`}
                    name={`New ${entityName}`}
                    render={() => (
                        <Suspense fallback={<LoadingComp />}>
                            <HOCModal
                                {...modalProps}
                                title={modalProps.createTitle}
                                baseEndpoint={baseEndpoint}
                                baseUiUrl={baseUiUrl}
                            >
                                {modalProps.modal && (
                                    <modalProps.modal
                                        {...modalProps}
                                        classes={classes}
                                        baseEndpoint={baseEndpoint}
                                        baseUiUrl={baseUiUrl}
                                    />
                                )}
                            </HOCModal>
                        </Suspense>
                    )}
                />

                <Route
                    path={`/${baseUiUrl}/:id`}
                    name={`Update ${entityName}`}
                    render={(insideProps) => (
                        <Suspense fallback={<LoadingComp />}>
                            <HOCModal
                                {...modalProps}
                                entityName={entityName}
                                title={modalProps.updateTitle}
                                baseEndpoint={baseEndpoint}
                                baseUiUrl={baseUiUrl}
                                id={insideProps?.match?.params?.id}
                            >
                                {modalProps.modal && (
                                    <modalProps.modal
                                        {...modalProps}
                                        classes={classes}
                                        id={insideProps?.match?.params?.id}
                                        baseEndpoint={baseEndpoint}
                                        baseUiUrl={baseUiUrl}
                                    />
                                )}
                            </HOCModal>
                        </Suspense>
                    )}
                />

                <Route
                    path={`/${baseUiUrl}`}
                    name='Index'
                    render={() => (
                        <Suspense fallback={<LoadingComp />}>
                            <HOCTable
                                entityName={entityName}
                                {...tableProps}
                                baseEndpoint={baseEndpoint}
                                baseUiUrl={baseUiUrl}
                            />
                        </Suspense>
                    )}
                />
            </Switch>
        );
    });
};

withMaterialTable.propTypes = {
    history: PropTypes.object.isRequired,
};

export default withMaterialTable;