Как предотвратить преждевременное исчезновение компонента?

Question

const FlashMessage = (props) => {
    const [isOpen, setIsOpen] = useState(true);
    const hideComponent = () => {
        setisOpen(false);
    };
    useEffect(() => {
        setIsOpen(true);
        setTimeout(() => hideComponent(), 9000);
    }, [props]);

    return (
        (props.flashMessage === true && isOpen) ?
            <View style={styles.main}>
                <Text style={styles.message}>{props.message}</Text>
            </View> 
        : null 
    );
}

У меня есть этот компонент Fla sh Message в моем приложении React Native, и иногда сообщение Fla sh исчезает через 2 секунды. Кажется, он появляется случайно, и, возможно, это связано с проблемой useEffect и setTimeout, но я не смог выяснить, что может быть причиной этого.

Answer 1

Эффект, который вы получаете с [props] как зависимость, не имеет смысла для меня. Но вы можете иметь изолированный эффект для isOpen логического значения.

 useEffect(() => {
    setTimeout(() => {
      setIsOpen(false);
    }, 9000);
  }, [isOpen]);

Вот полный рабочий пример, упрощенный:

export default function App() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setShow(false);
    }, 2000);
  }, [show]);
  return (
    <div className="App">
      <button onClick={e => setShow(true)}>Show</button>
      {show && <div>hello</div>}
    </div>
  );
}