Javascript 使用React钩子的全局状态模式+；上下文API在移动设备（iOS）上不起作用

所以我就上了YouTube。当全局状态发生变化时，组件重新渲染在桌面（MicrosoftEdge）上似乎可以很好地工作，但当我在手机（iPhone8，在safari和Google Chrome上都测试过）上进行测试时，它就不起作用了

以下是App.js中的代码：

function App() {
  const contentStyle = makeStyles((theme) => ({
    container: {
      padding: '5px',
      width: '100% !important',
      height: '100% !important',
      margin: 0,
      flexGrow: 1,
    },
    chart_container: {
      width: '100%', height: '100%', position: 'relative'
    },
    paper: {
      padding: theme.spacing(2),
      textAlign: 'center',
      color: theme.palette.text.secondary,
      height: 'inherit',
    },
    alternative: {
      backgroundColor: '#ffffff'
    },
    maps: {
      minHeight: '350px',
      maxHeight: '60vh',
      width: '100%',
      height: '100%'
    }
  }));
  const classes = contentStyle()
  const { state } = useContext(Context)
  return (
    <React.Fragment>
      <Navbar title='MyApp' />
      <Grid container spacing={3} className={classes.container}>
        <Grid item xs={12}>
          <Paper elevation={5} className={classes.paper + ' ' + classes.alternative}>
            <Grid container spacing={2}>
              <Grid item xs={6}>
                <Maps className={classes.maps} elevation={5} />
              </Grid>
              <Grid item xs={6}>
                <BridgeCard name={state.bridgeName} address={state.bridgeAddress} image={state.bridgeImage} />
              </Grid>
            </Grid>
          </Paper>
        </Grid>
        <Grid item xs={12}>
          <GraphTabs />
          <Paper elevation={5} className={classes.paper + ' ' + classes.alternative}>
            <canvas style={{ width: '100%', height: '60vh' }} id="chart1" />
          </Paper>
        </Grid>
      </Grid>
    </React.Fragment>
  )
}

Inside index.js

const Index = () => {
  const theme = createMuiTheme({ palette, themeName });
  const store = useGlobalState();
  return (
    <Context.Provider value={store}>
      <React.StrictMode>
        <MuiThemeProvider theme={theme}>
          <App />
        </MuiThemeProvider>
      </React.StrictMode>
    </Context.Provider>
  )
}

---

我是否遗漏了什么，或者这与移动浏览器有关？我做了一次调试尝试，发现当全局状态更改时，组件不会重新渲染。有什么建议吗？

应该添加哪些不起作用，以及您为这些组件使用的库。猜猜是材料界面？嗨@user120242，谢谢你的建议，我已经更新了我的帖子。是的，我正在使用material-ui。有什么更新吗？我目前也遇到了这个问题。我想补充一下什么是不起作用的，以及您正在为这些组件使用什么库。猜猜是材料界面？嗨@user120242，谢谢你的建议，我已经更新了我的帖子。是的，我正在使用material-ui。有什么更新吗？我目前也遇到了这个问题

const Index = () => {
  const theme = createMuiTheme({ palette, themeName });
  const store = useGlobalState();
  return (
    <Context.Provider value={store}>
      <React.StrictMode>
        <MuiThemeProvider theme={theme}>
          <App />
        </MuiThemeProvider>
      </React.StrictMode>
    </Context.Provider>
  )
}

import { useState } from 'react';

const useGlobalState = () => {
    const [state, setState] = useState({

    })

    const actions = (action) => {
        const { type, payload } = action;
        switch (type) {
            case 'setState':
                return setState(payload)
            default:
                return state;
        }
    }
    return { state, actions }
}

export default useGlobalState;