时间戳

首页 > 解决方案 > useState 中的默认值未重新初始化

javascript - useState 中的默认值未重新初始化

问题描述

我有一个snack bar component，它会显示一条 toast 消息几秒钟然后消失。我有一个App component包含 的button，点击它button，我想控制snack bar component。第一次单击时，snack bar显示正常并在指定时间结束后消失。但是当我再次单击它时，snack bar不会出现。我show state每次都将其初始化为真，但仍然snack bar没有出现。请告诉我哪里出了问题以及如何纠正这个问题。以下是文件。我正在使用自定义挂钩来控制小吃店外观的行为。

应用程序.js

import React, { useState } from "react";
import { Snackbar } from "./Snackbar";

function App() {
  const [display, setDisplay] = useState(false);
  return (
    <div>
      <button onClick={() => setDisplay(true)}>Click me</button>
      {display && <Snackbar message="hello" />}
    </div>
  );
}

export default App;

小吃吧.js

import React from "react";
import { useSnackbar } from "./useSnackbar";

const Snackbar = ({ message }) => {
  const { showSnackbar } = useSnackbar();
  return (
    showSnackbar && (
      <div>
        <p>{message}</p>
      </div>
    )
  );
};

export { Snackbar };

使用Snackbar.js

import { useState, useEffect } from 'react';

const useSnackbar = () => {
  const [showSnackbar, setSnackbar] = useState(true);
  const [snackbarMessage, setSnackbarMessage] = useState('');

  useEffect(() => {
    const timer = setTimeout(() => {
      setSnackbar(false);
      setSnackbarMessage('');
    }, 3000);

    return () => {
      clearTimeout(timer);
    };
  }, [showSnackbar]);

  return {
    showSnackbar,
    setSnackbar,
    snackbarMessage,
    setSnackbarMessage
  };
};

export { useSnackbar };

标签： javascriptreactjsreact-hookssetstateuse-state

解决方案

确实，useSnackbar钩子的默认值是trueforshowSnackbar并且它确实false在 3 秒后更改为，但displayinApp.js保持不变true，这意味着即使在timeout.

由于displaynever 设置为false，Snackbar因此永远不会卸载，因此状态useSnackbar永远不会重新初始化。

我的建议是改变使用方式的结构useSnackbar。

我会搬进useSnackbar去App.js并在那里设置小吃店的开放状态。

function App() {
  const { showSnackbar, setSnackbar } = useSnackbar();

  return (
    <div>
      <button onClick={() => setSnackbar(true)}>Click me</button>
      {showSnackbar && <Snackbar message="hello" />}
    </div>
  );
}

const useSnackbar = () => {
  const [showSnackbar, setSnackbar] = useState(false);

  // rest of code
};

const Snackbar = ({ message }) => (
  <div>
    <p>{message}</p>
  </div>
);

代码沙盒演示

还有其他方法可以构建组件，但对于您的示例，这将是最简单的解决方案之一。

推荐阅读