Компонент оповещения не срабатывает второй раз

Question

Я создал компонент 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;

Answer 1

просто поместите сообщение в качестве параметра в вашем useEffect:

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

Таким образом, оно будет действовать при каждом изменении сообщения.

Answer 2

useEffect принимает два аргумента. Первый - это функция, второй - массив. Функция запускается каждый раз, когда изменяется элемент в массиве.

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

Answer 3

Проблема заключалась в том, что состояние в приложении. js не обновлялось, поэтому я отправил его в качестве опоры в компонент Alert, чтобы обновить его там.

Alert. js

import React, { useEffect } 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 = ({ setAlert, message }) => {
  useEffect(() => {
    if (message) {
      let timer = setTimeout(() => {
        setAlert(null);
      }, 5000);
      return () => clearTimeout(timer);
    }
  }, [message]);
  if (message) {
    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 setAlert={setAlert} message={alert} />
      <AlertContext.Provider value={setAlert}>
       COMPONENTS HERE
      </AlertContext.Provider>
   </>
  );
}
export default App;

Всем, кто помог. Большое спасибо, ваш вклад был неоценим.

Answer 4

Возможно, это происходит потому, что вы не очищаете setTimeout. Попробуйте что-то вроде этого

  useEffect(() => {
    let timer = null;
    if (message) {
      setVisible(true);
      timer = setTimeout(() => {
         setVisible(false);
      }, 5000);
    }

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