时间戳

首页 > 解决方案 > 警报组件不会第二次重新触发

javascript - 警报组件不会第二次重新触发

问题描述

我创建了一个 Alert 组件，以便能够从 ReactJS 应用程序中的所有组件发送警报，并通过 Context.Provider 传递它。消息存储在状态中，状态函数作为 Context.Provider 的值传递。

但是，如果我尝试使用它一次它可以工作，但第二次就不行了。有任何想法吗？

警报.js

import React, { useEffect, useState } from "react";
import styled from "styled-components";

const StyledDiv = styled.div`
  width: 100%;
  height: 30px;
  font-size: 1.2em;
  text-align: center;
  background: tomato;
`;

const Alert = ({ message }) => {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    if (message) {
      setVisible(true);
      setTimeout(() => {
        setVisible(false);
      }, 5000);
    }
  },[message]);
  if (visible) {
    return <StyledDiv id="alert">{message}</StyledDiv>;
  } else return null;
};
export default Alert;

应用程序.js

import React, { useState, createContext } from "react";
import Alert from "./components/alert/Alert";
export const AlertContext = createContext();
function App() {
  const [alert, setAlert] = useState();
  return (
    <>
      <Alert message={alert} />
      <AlertContext.Provider value={setAlert}>
       COMPONENTS HERE
      </AlertContext.Provider>
   </>
  );
}
export default App;

标签： javascriptreactjsreact-hooks

解决方案

只需将消息作为参数放在您的 useEffect 中：

useEffect(() => {
    if (message) {
      setVisible(true);
      setTimeout(() => {
      setVisible(false);
    }, 5000);
   }
}, [ message ]);

这样，每次消息更改时它都会起作用。

推荐阅读