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

Question

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

    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> 
)

}

导出默认相机

Answer 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>
  )
}

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

How to display Snack Bar Material UI inside if statment

javascript

reactjs

material-ui

notifications

snackbar