如何在 if 语句中显示 Snackbar Material UI答案

【问题标题】：How to display Snack Bar Material UI inside if statment如何在 if 语句中显示 Snackbar Material UI
【发布时间】：2022-01-11 15:52:34
【问题描述】：

如果我的相机组件返回一些错误，我想显示一个快餐栏通知。我试图将组件放在一个函数中并将错误消息作为道具传递，并在 if 语句中调用它，但没有奏效。我还尝试返回小吃店本身，也没有显示出来，而 console.log 或警报消息在这两种方式下都可以正常工作。我没有显示代码的某些部分，因为它是私有的，我只显示有关小吃店的部分。无论如何，如果只是在snackBar 函数中放置一些console.log 或alert，它会很好地返回它。问题出在小吃店。这是我的代码：

    import React from 'react'
    import Snackbar from '@mui/material/Snackbar'
    
    const Camera = () => {
  const [open, setOpen] = useState(false)
        const snackBar = (errorMessage) => {
            setOpen(true)
            return <Snackbar open={open} message={errorMessage} />
        }

        let callback = {
                    error: function (error) {
                    console.log(error)
                    if (error.code === 100) {
                        return snackBar('error occured')
                    } 
                    } else if (error.code === 104) {
                        console.log('104')
                        return snackBar('Please don't move the phone')
                    } else if (error.code === 105) {
                        console.log('105')
                        setOpen(true)
                        return snackBar('Try again')}
                },
         }
return (
    
       <div>
         <h1>Camera</h1>
       </div> 
)

}

导出默认相机

【问题讨论】：

标签： javascript reactjs material-ui notifications snackbar

【解决方案1】：

您没有在任何地方调用回调或snackBar，也没有在任何JSX 中返回。你也忘了导入useState。

如果您的意图是提供一个回调来处理错误（例如在获取时），然后显示小吃栏，这里有一个示例，说明如何使用（非常粗略的伪代码）回调示例来做到这一点

import { Snackbar } from "@mui/material"
import { useState } from "react"

const Camera = () => {
  const [errorMessage, setErrorMessage] = useState(null)

  const callback = (error) => {
    if(error.code === '100') {
      setErrorMessage('Message 100')
    } else if(error.code === '105') {
      setErrorMessage('Message 105')
    } // ... add all your other else-ifs here
  } 

  return (
    <div>
      <h1>camera</h1>
      {errorMessage && <Snackbar open={errorMessage} message={errorMessage} />}
    </div>
  )
}

【讨论】：

非常感谢，成功了！