Блог

Я делаю вызов api

отчет.tsx

 if (buttonClick === 'pdf') {  getReportPDF(params, sort);  }  

отчет-reducer.ts

 export const getReportPDF = (search, sort) =gt; {  const params = new URLSearchParams(search) ? new URLSearchParams(search).toString() : null;  const sorting = new URLSearchParams(sort) ? new URLSearchParams(sort).toString() : null;   const requestUrl = `${apiUrlPDF}?${params}${Object.keys(sort).length gt; 0 ? 'amp;'   sorting : ''}`;    fetch(requestUrl).then(response =gt; {  response  .blob()  .then(blob =gt; {  if (blob.type === 'application/problem json') {  alert('Nothing');  } else {  const url = window.URL.createObjectURL(blob);  const a = document.createElement('a');  a.href = url;  a.download = 'report.pdf';  a.click();  }  })  .catch(error =gt; console.log('error is ', error));  }); };  

Теперь моя проблема в следующем: в данный момент я использую оповещение непосредственно в редукторе, но если бы я показал другое оповещение

( например, загрузчик usign:

 lt;div class="alert alert-primary" role="alert"gt;  A simple primary alert with lt;a href="#" class="alert-link"gt;an example linklt;/agt;. Give it a click if you like. lt;/divgt;  

)

в отчете.tsx, как я могу это сделать? Я должен что-то вернуть if (blob.type === 'application/problem json') ??

Спасибо

Вы можете создать состояние, в report.tsx котором контролируется отображение предупреждения:

 const [isAlertShowing,setAlertShowing]=useState(false)  

Теперь getReportPDF сделайте дополнительный параметр обратного вызова в случае успеха:

 export const getReportPDF = (search, sort, callback) =gt; {  const params = new URLSearchParams(search) ? new URLSearchParams(search).toString() : null;  const sorting = new URLSearchParams(sort) ? new URLSearchParams(sort).toString() : null;   const requestUrl = `${apiUrlPDF}?${params}${Object.keys(sort).length gt; 0 ? 'amp;'   sorting : ''}`;    fetch(requestUrl).then(response =gt; {  response  .blob()  .then(blob =gt; {  if (blob.type === 'application/problem json') {  callback() // invoke the callback here or anywhere else you that you want  } else {  const url = window.URL.createObjectURL(blob);  const a = document.createElement('a');  a.href = url;  a.download = 'report.pdf';  a.click();  }  })  .catch(error =gt; console.log('error is ', error));  }); };  

Затем передайте функцию как callback , которая устанавливает isAlertShowing значение true

 const activateAlert=()=gt;setAlertShowing(true)   if (buttonClick === 'pdf') {  getReportPDF(params, sort, activateAlert);  }  

Наконец, при визуализации компонента показывайте предупреждение всякий isAlertShowing раз, когда true :

Например:

 return (  {isAlertShowing amp;amp; lt;div class="alert alert-primary" role="alert" ....