javascript - Reactjs在功能组件中调用组件后更新状态

Question

我创建了一个名为 Alertify.js 的组件

import React, {useEffect, useState} from "react";
import { Alert } from 'reactstrap';

function Alertify(props){

    const [show, setShow] = useState(props.show);

        useEffect(
            () => {
                let timer = setTimeout(() => setShow(false), 3000);
                return () => {
                    clearTimeout(timer);
                };
            },
            []
        );

    return (
        <Alert color={props.color} className={show ? 'float active' : 'float'}>{props.text}</Alert>
    )
}

export default Alertify;

并在index.js中使用

import Alertify from "../Component/Alertify";
const [showAlert, setShowAlert] = useState(false);
return...
<Alertify text={'hello world'} color={'danger'} show={showAlert}/>

它会在条件为真后显示此警报:

if(condition){
setShowAlert(true)
}

但是出了点问题，没有在条件下显示警报，我是 reactjs 的新手，知道如何解决这个问题吗？我只想在条件为真后显示警报，然后在 3 秒后隐藏。

如果我在条件为真之前删除 useEffect，并且也没有隐藏，它也会显示。

Answer 1

尝试以下操作

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

useEffect(() => {
  if (props.show) {
   setShow(true)
  }
},[props.show])

您可以让现有的 useEffect 在 3 秒后按原样清除。

编辑:

这是一种修改后的方法，您的 Alertify 组件看起来像这样

import React, { useEffect, useState } from "react";
import { Alert } from "reactstrap";

function Alertify(props: {
  show: any;
  color: string;
  text: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal;
  setShowAlert: (value: boolean) => void;
}) {
  const [show, setShow] = useState(false);

  useEffect(() => {
    let timer = setTimeout(() => {
      return setShow(false);
    }, 3000);
    return () => {
      clearTimeout(timer);
    };
  });

  useEffect(() => {
    if (props.show) {
      setShow(true);
      props.setShowAlert(false);
    }
  }, [props.show, props.setShowAlert]);

  if (show) {
    return (
      <Alert color={props.color} className={show ? "float active" : "float"}>
        {props.text}
      </Alert>
    );
  }

  return null;
}

export default Alertify;

你的调用组件看起来像这样

import "./styles.css";
import Alertify from "./Alertify";
import { useState } from "react";

export default function App() {
  const [showAlert, setShowAlert] = useState(false);
  return (
    <>
      <div className="App">
        <Alertify
          text={"hello world"}
          color={"danger"}
          show={showAlert}
          setShowAlert={setShowAlert}
        />
      </div>
      <button onClick={() => setShowAlert(true)}>show alert</button>
    </>
  );
}

这是codesandbox链接https://codesandbox.io/s/alertify-stackoverflow-x096t