Я действительно застрял в проблеме с веб-приложением React, которое я создаю. Я использую метод array.map () для динамического создания раскрывающихся списков и обнаруживаю, что все прекрасно работает в настольных браузерах (в том числе в мобильном представлении инструментов Chrome dev), но не в реальных мобильных браузерах. Буду очень признателен за ваши мысли!
Ожидаемое поведение
Я ожидаю, что выпадающие списки будут заполняться, как правило, из массива объектов. Затем, когда пользователь нажимает на один из элементов в раскрывающемся меню, он либо инициирует (1) функцию, либо (2) ссылку на другую часть приложения React. Обратите внимание, что я использую response-router-dom для обработки маршрутизации.
Наблюдаемое поведение на мобильных браузерах
Раскрывающиеся списки заполнены правильно, но они не работают, когда я выбираю из среди вариантов (см. рисунок 1). 
Такое поведение наблюдается, когда выпадающий выбор активирует и (компонент-router-dom Component), и вызывает функцию. В ограниченных случаях, когда функция вызывается правильно, правильные параметры передаются и функция выполняется правильно.
Фрагменты кода
Это пример кода, который я использую для генерации списка ссылок. Это простой функционал React компонент, который служит заголовком для всех страниц настроек в моем приложении, а компонент является частью библиотеки React Materialize CSS, которая, кажется, работает нормально .:
const SettingsHeader = () => {
let { url } = useRouteMatch();
const { userAccess, styleItem, headerStyle, updateHeader, theme } = useContext(SettingsContext);
const options = userAccess.length ? (
userAccess.sort().map(permission => {
// Returns an object with details needed to build the component via a Settings Context function.
let details = styleItem(permission);
return (
<Link
key={permission}
to={`${url}${details.link}`}
onClick={() => updateHeader(permission)}
>
<Icon className={theme.text}>{details.icon}</Icon>
<span className={theme.text}> {details.text}</span>
</Link>
);
})
) : (
<h4 className="grey-text">
<Icon>warning</Icon> You don't have permission to edit any settings.
</h4>
);
return (
<h4 className={theme.text}>
<i className="material-icons">{headerStyle.icon}</i> {headerStyle.text}
<Dropdown
options={{ ... }}
trigger={
<Button className={"right " + theme.themeColor} node="button">
Views
</Button>
}
>
{options}
<a href="#!">
<Icon className="grey-text">close</Icon>
<span className="grey-text"> Close</span>
</a>
</Dropdown>
</h4>
);
}
Это пример кода, который я использую для создания списка параметров темы, каждый из которых вызывает функцию в компоненте контекста React, который я использую в много мест в приложении:
const ThemeSettings = () => {
// Brings in Theme update function from SettingsContext
const { changeTheme, theme } = useContext(SettingsContext);
// Array of possible themes.
const themesList = ['Burnt Orange', 'Chrome', 'Deep Purple', 'Earth', 'Fresh Green', 'Green', 'Maroon', 'Navy', 'Pink', 'Red', 'Royal Blue', 'Teal']
const themeOptions = themesList.map(theme => {
let themeObject = getTheme(theme);
return (
<a href="#!" key={theme} onClick={(e) => changeTheme(e, theme) }>
<Icon className={themeObject.text}>style</Icon>
<span className={themeObject.text}> {theme}</span>
</a>
)
});
return (
<Dropdown
options={{ ... }}
trigger={
<Button className={"left " + theme.themeColor} node="button">
Themes
</Button>
}
>
{ themeOptions }
<a href="#!">
<Icon className="grey-text">close</Icon>
<span className="grey-text"> Close</span>
</a>
</Dropdown>
);
}
Большое спасибо за такой взгляд!