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

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

Answer 2

试试这个代码。您可以在 index.js 中控制渲染 Alertify 组件。如果 showAlert 值为 true，React 会渲染 Alertify 组件。当 setTimeout 执行时，showAlert 的值为 false，这意味着 React 卸载 Alertify 组件。这就像您需要的显示和隐藏效果。

// index.js
import Alertify from "../Component/Alertify";
const [showAlert, setShowAlert] = useState(false);

if (condition( {
  setShowAlert(true); // This makes Alertify component mount immediatly.
  setTimeout(setShowAlert(false),3000); // This makes Alertify component unmount in 3,000ms.
}

return...
{showAlert && <Alertify text={'hello world'} color={'danger'}/>}

因此，你不需要使用 useEffect 来隐藏这个组件。

// Alertify.js
import React, {useEffect, useState} from "react";
import { Alert } from 'reactstrap';

function Alertify(props){

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

export default Alertify;