反应组件在第一次渲染中显示，但在以下重新渲染中不显示

Question

I have a react component that consists in an alert to which I am passing 2 props, (however these 2 props rarely change within this component)

const AlertPopUp = ({ severity, errors }) => {
  const [show, setShow] = useState(true)
  console.log('show value of show state: ', show)

  useEffect(() => {
    console.log('gets here')
    const timeId = setTimeout(() => {
      // After 5 seconds set the show value to false
      setShow(false)
    }, 5000)

    return () => {
      clearTimeout(timeId)
    }
  });

  console.log('errors ', errors)

  if (!errors)  return null
  if (show) 
    return (
      <>
        <Alert severity={severity}>
          {errors}
        </Alert>
      </>
    )
}

In the first render, the Alert shows up and after the expected 5 seconds the component disappears.

In the re-render, the Alert does not show up anymore, and from my debugging I assume it has to do to with the line console.log('show value of show state: ', show) which displays false in the re-render.

If I do a setShow(true) I run into an infinite loop of re-renders.

If I use a useRef to avoid the useState infinite loop the component doesn't re-render and therefore the Alert never displays.

If I try to set a key to the component key=useId() / pass a counter, the state is still set to false whenever the parent component rerenders, looking like the component doesn't destroy and create again.

Please forgive me if I made any of my assumptions wrongly as I am far from being a react expert.

Could please anyone help me find a solution so that the Alert displays in every render of the alert component and disappears after the 5 seconds?

Answer 1

发生这种情况是因为您从未将show设置回true

Answer 2

One solution is to use a different key every time you want to show the component again . This way when you pass a different key when you want the alert to reappear, its old instance will be destroyed, and it will be like rendering that component from the beginning; so the show flag won't be false anymore, which prevents it from appearing in your original case. Here is example:

let Alert = (props) => {
  let [show, setShow] = React.useState(true);

  React.useEffect(() => {
    setTimeout(() => {
      setShow(false);
    }, 5000);
  }, []); // note empty array also

  if (!show) return null;
  return <div>alert</div>;
};
export default function App() {
  let [id, setId] = React.useState(0);
  return (
    <div onClick={() => setId(id + 1)}>
      Click to show alert
      <Alert key={id} />
    </div>
  );
}

Answer 3

I think I understand the problem with your code. Let me explain, on initial render, show is true, so your alert component renders. But you also set show to false .Now when your props change , which causes a re-render but because show is still false , your alert component doesn't re-render. So try this; move your setTimeOut where you set setshow to false outside the useEffect ( it's still going to run ) and then inside your useEffect , set show to true and also pass your props (errors and severity) into the array that useEffect takes as second argument so that when those props change , your useEffect will run setting show to true which will cause ur component to re-render and show being true , your alert renders .

Answer 4

Issue

From what I can understand of your post, the AlertPopUp component works without issue upon the initial mount and render. The problem is then how to retrigger the component to render the Alert .

Solution

I suggest lifting state up and making the AlertPopUp a fully controlled component that also consumes an onClose callback to handle updating the show state.

Example:

const AlertPopUp = ({ show, severity = "error", errors, onClose }) => {
  useEffect(() => {
    const timeId = setTimeout(() => {
      // After 5 seconds set the show value to false
      onClose();
    }, 5000);

    return () => {
      clearTimeout(timeId);
    };
  });

  if (!errors) return null;
  if (show) {
    return (
      <Alert onClose={onClose} severity={severity}>
        {errors}
      </Alert>
    );
  }
};

Usage:

const [show, setShow] = useState(false);

const closeHandler = () => setShow(false);

return (
  ...

  {/* Just an example to trigger the alert to display */}
  <button type="button" onClick={() => setShow(true)}>
    Show Alert
  </button>

  <AlertPopUp
    {...{ errors, show, onClose: closeHandler }}
  />

  ...
);

Now when either the timeout expires or the user manually dismisses the alert the onClose callback is called and will update the show state in the ancestor to false and hide the Alert component.

Answer 5

The issue essentially was:

1. Alert was not getting triggered after change of props ( severity here)
2. show state was not getting set to true whenever props change

Here, I have simulated the prop change behaviour by a counter and therefore after every 10 sec, alert would pop-up.

Solution:

1. put severity in deps array
2. On every prop change useEffect will trigger and then set show as true .

import { useRef, useEffect, useState } from "react";

// Dummy Alert Component
const Alert = ({ severity, children }) => {
  alert(children);
  return null;
};

// Reusable AlertPopUp component with same props
const AlertPopUp = ({ severity, errors }) => {
  const [show, setShow] = useState(true);
  const timeId = useRef();

  useEffect(() => {
    setShow(true);
    timeId.current = setTimeout(() => {
      // After 5 seconds set the show value to false
      setShow(false);
    }, 5000);

    return () => {
      clearTimeout(timeId.current);
    };
  }, [severity]);

  if (!errors) return null;
  if (show)
    return (
      <>
        {" "}
        <Alert severity={severity}>{errors}</Alert>{" "}
      </>
    );
};

// Component for simulating the behaviour
export default function App() {
  const [count, setCount] = useState(0);
  let counter = useRef();

  useEffect(() => {
    if (counter) {
      counter.current = setTimeout(() => {
        setCount(count + 1);
      }, 10000);
    }
    return () => {
      clearTimeout(counter.current);
    };
  }, [count]);

  console.log("this is count", count);

  return (
    <div className="App">
      <AlertPopUp severity={count} errors={`this is error: ${count}`} />
    </div>
  );
}

Link to Implementation in Sandbox:https://codesandbox.io/s/trusting-hertz-gjiexc?file=/src/App.js

Answer 6

Here is my answer. You may need to use key if you want the component to re-render. A link to the working code is here .

const AlertPopUp = ({ severity, errors }) => {
  const [show, setShow] = useState(true);
  useEffect(() => {
    const timeId = setTimeout(() => {
      // After 5 seconds set the show value to false
      setShow(false);
    }, 5000);

    return () => {
      clearTimeout(timeId);
    };
  });

  return !errors ? null : show && <Alert severity={severity}>{errors}</Alert>;
};

Usage:

<AlertPopUp key={key} severity={severity} errors={error}/>