Прокручиваемые вкладки пользовательского интерфейса не отображаются в Internet Explorer

Question

Я нахожусь в процессе реализации пользовательского интерфейса материала для нашего элемента управления вкладками в нашем веб-интерфейсе React. В Chrome это работало нормально, но во второй раз, когда мы попытались протестировать это в IE, страница отказывается загружаться, и консоль выдает следующую ошибку:

Необработанное отклонение обещания. Нарушение инварианта: превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate. React ограничивает количество вложенных обновлений для предотвращения бесконечных циклов.

Ниже приведен код, который был добавлен вокруг Material-UI. Как уже упоминалось, это прекрасно работает в Chrome, но, похоже, просто падает в IE. Конкретной строкой, которая нарушает IE, является строка scrollable={true} - если она будет удалена или изменена на false, страница будет отображаться (хотя без необходимой нам прокрутки). Не уверены, есть ли какие-то особые ошибки, которые нам нужно отслеживать в IE в отношении Material-UI?

    var menuString = isList ? null : <AppBar position="static" color="default"><Tabs
        scrollable={true}
        value={activeItem}
        onChange={this.handleTabSelection}
        scrollButtons="auto"
        classes={{ indicator: "tabsIndicator" }}>
        {
            jsxData.map((item, index) => {
                return (
                    <Tab key={index} value={item.name} label={item.name} 
                    classes={{ selected: "tabSelected" }}/>
                );
            })
        }
    </Tabs></AppBar>;

    return <Segment basic className={"report-group-render " + (isList ? "list" : "tabs")}>
        {menuString}
    </Segment>;

Answer 1

Ответ состоял в том, что jsxData.map(...) возвращает пустой массив за несколько итераций, прежде чем, наконец, будет обработан его массивом отчетов. Chrome игнорирует / глотает эти начальные проблемы пустого массива, не беспокоясь о том, как IE решает сам себя.

Решением было изменить первую строку на следующую:

var menuString = isList || jsxData.length === 0 ? null : <AppBar position="static" color="default"><Tabs