react-bootstrap - react 引导警报不显示

Question

React react-bootstrap 警报未显示

import { Alert } from 'react-bootstrap';
import React from 'react';

const ShowSuccess= () => {
  return (
    <Alert color='primary' fade={false}>check it out!</Alert>
  );    
}

export { ShowSuccess };

这是调用我的警告框的部分

import { ShowSuccess } from '../../Notifications';

export const fetchInfo= async () => {
    try {
      await getData();
      ShowSuccess();
    } catch (error) {
      console.log(error);
    }
  }

Answer 1

是的，无论何时进行 API 调用，您都可以将 flag 状态设置为 true。如果标志状态为真，那么您可以执行必要的操作或任务，例如在您的案例中显示警告框，否则执行其他任务。

您可以执行条件渲染以在 JSX 中显示警告框。

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

function FetchInfo(){
  const [value, setValue] = useState(null);
  const [flag, setFlag] = useState(false);

  useEffect(() => {   
    async function fetch() {
      try {
        const data = await getData();
        setValue(data);     
        setFlag(true);
      } catch(e) {
        console.log(e);
      }
     fetch();
  },[])
   
  return (
   <> 
    {flag && 
     <Alert color='primary' fade={false}>check it out!</Alert>
    }   
  </>);
}
export default FetchInfo;