Question

我在屏幕上有一个按钮。单击该按钮时，我在0到1之间切换数据库值。在数据库值1上，我希望将按钮显示为ONLINE；在数据库值0上，我希望将按钮显示为OFFLINE。我还使用本地存储来保持状态。但是状态仍然没有变。

CODE

这是我在本地存储中设置数据库值的方式

dispatch({ type: SHOP_STATUS_LOAD, payload: '' })
        Axios.patch('http://localhost:5000/api/shopuser/shop/status', null, { headers })
            .then((resp) => {
                dispatch({ type: SHOP_STATUS_FETCH, payload: resp.data.message })
                var status
                resp.data.data.forEach(element => {
                    status = element.shopStatus
                });
                localStorage.setItem('status', JSON.stringify(status))
            })
            .catch((err) => {
                console.log(err)
                dispatch({
                    type: SHOP_STATUS_ERROR,
                    payload: "Unable to get data. Try again.",
                })
            });

我的按钮页面代码

const Home = (props) => {
  const [open, setOpen] = React.useState(false);
  const [test, setTest] = React.useState(JSON.parse(localStorage.getItem('status')));

  const { getCurrentOrders, setShopStatus } = props

  useEffect(() => {
    getCurrentOrders()
    const socket = openSocket('http://localhost:5000')
    socket.on('orders', data => {
      getCurrentOrders(data)
    })
    setTest(JSON.parse(localStorage.getItem('status')))
    return () => socket.disconnect();
  }, [])

        <Grid container justify="flex-start" className={classes.newSection}>
          <Button variant="outlined" color={test === 1 ? `primary` : `secondary`} onClick={handleClickOpen} className={test === 1 ? `classes.buttonOnline` : `classes.buttonOffline`}>
            {test === 1 ? 'Online' : 'Offline'}
          </Button>
        </Grid>

状态没有改变。浏览器刷新后更改状态

0 个答案: