如何防止组件过早消失？

【问题标题】：How do you prevent the component from disappearing too soon?如何防止组件过早消失？
【发布时间】：2020-05-04 14:31:26
【问题描述】：

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 
    );
}

我的 React Native 应用中有这个 Flash Message 组件，有时，Flash Message 会在 2 秒后消失。它似乎是随机出现的，可能是由于 useEffect 和 setTimeout 的问题，但我无法弄清楚可能是什么原因造成的。

【问题讨论】：

标签： reactjs react-native

【解决方案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>
  );
}

【讨论】：