Блог

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

и вот та часть, где вызывается my alert box

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

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

Да, вы можете установить flag состояние в true всякий раз, когда вы выполняли вызов API. Если состояние флага равно 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 amp;amp; 
     <Alert color='primary' fade={false}>check it out!</Alert>
    }   
  </>);
}
export default FetchInfo;
  

Вам нужно установить состояние, чтобы предупреждение сработало. Это компонент React. Включите компонент везде, где вам нужно использовать Alert , и установите его состояния после разрешения вызова API.

 function MyComponentWhereApiCallHappens() {
  const [show, setShow] = React.useState(false);

  async function apiCall() {
    const data = await fetchInfo();
    setShow(true); 
  }

  return (
     <div> 
       <Alert>
         /** alert content **/
       <Alert>
     </div>
  )
}

  

Если вы хотите вызвать что-то вроде Alert из-за пределов компонента React.

Используйте эту библиотеку -> https://github.com/fkhadra/react-toastify