React hooks 和 Material-UI：Snackbar 显示一次但不再显示

Question

我已经在这里隔离了我的问题，因此您可以轻松地重现此问题。 重现步骤：

第 1 步：创建一个 React 应用并将material-ui添加到项目中：

prompt> create-react-app mui-test
prompt> cd mui-test
prompt> yarn add @material-ui/core @material-ui/icons

第二步：修改以下文件：

索引.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
    <App />,
  document.getElementById('root')
)

应用程序.tsx

import React, { useState } from 'react'
import { Button, Snackbar } from '@material-ui/core'

interface MessageComponentProps { messages: string[] }

export const MessageComponent: React.FC<MessageComponentProps> = ({ messages }) => {
  console.log("Render MessageComponent... messages: ", messages)
  console.log("messages.length > 0: ", messages.length > 0);

  // This shows the Snackbar once but when I reclick the submit button,
  // it doesn't do it again.
  const [showMessage, setShowMessage] = useState(true)

  const onClose = () => {
    console.log("calling onClose()...")
    setShowMessage(false)
  }

  if (messages.length === 0) return <></>

  return <>
    <Snackbar
      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
      key={`top,center`}
      open={showMessage}

      // eventurally I want to display all messages but this will work for now.
      message={messages[0]}
      onClose={onClose}
    />
    Proof that Snackbar should be rendered here: {messages[0]}
  </>
}

export const PageComponent: React.FC = () => {
  console.log("Render PageComponent...")
  const [errors, setErrors] = useState<string[]>([])

  const onSubmit = (e: any) => {
    e.preventDefault()

    // simulates a collection of error messages sent back from the server to
    // show to the user.
    setErrors(['Foo ' + Math.random(), 'Bar'])
  }

  return <>
    <MessageComponent messages={errors} />
    <form onSubmit={onSubmit} >
      <Button type="submit" color="primary" variant="contained">Submit</Button>
    </form>
    <p>
      What I'm trying to accomplish here is that whenever this button is clicked,
      The snackbar should show and then be cleared when the user clicks away from
      the message. It only does this the first time but doesn't any of the
      consecutive clicks.
    </p>
  </>
}

function App() {
  console.log("Render App...")

  return <PageComponent />
}

export default App

问题：我可以弹出SnackBar消息，但是当我尝试关闭它时，尽管调用了onClose方法，但它永远不会出现。 当我尝试修复此问题时，它永远不会真正打开（请参阅代码中的一些注释了解我在此处尝试执行的操作）

在某一时刻，我可以让SnackBar关闭。 然而，点击Submit按钮应该会导致SnackBar消息再次弹出，但在第一次之后就不再弹出了。 让它回来的唯一方法是如果我重新加载页面然后再次单击按钮。

我对 React 还是很陌生，所以我正在为此苦苦挣扎，但我偷偷怀疑这个食谱需要useEffect吗？

Answer 1

在您的消息组件中使用useEffect并收听messages 。

const [showMessage, setShowMessage] = useState(true);
  useEffect(() => {
    if (messages.length > 0) {
      setShowMessage(true);
    }
  }, [messages]);

为了关闭snackbar，您需要提供一个动作道具或一个autoHideDuration

     <Snackbar
        anchorOrigin={{ vertical: "top", horizontal: "center" }}
        key={`top,center`}
        open={showMessage}
        autoHideDuration={6000}
        // eventurally I want to display all messages but this will work for now.
        message={messages[0]}
        onClose={onClose}
        action={
          <React.Fragment>
            <IconButton
              size="small"
              aria-label="close"
              color="inherit"
              onClick={onClose}
            >
              X
            </IconButton>
          </React.Fragment>
        }
      />

您的代码的工作副本在这里

Answer 2

我想到了两个快速的解决方案：

{
  Boolean(showMessage) && ----------------Do this
  <Snackbar
  anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
  key={`top,center`}
  open={Boolean(showMessage)} --------------- or do this

  // eventurally I want to display all messages but this will work for now.
  message={messages[0]}
  onClose={onClose}
/>}