獲取資料時顯示加載反應-有解無憂

我有一個 fetch 呼叫，用戶可以在其中上傳影像然后發布它。但是，我想在發布影像時使用加載程式向用戶顯示。我的問題是我的裝載機總是顯示出來。文本something is loading始終顯示。我只想在請求未決時顯示文本。我能得到一些幫助嗎=

  export default function ImageUpload() {
        const [spinner, setSpinner] = useState(false);
    
      function upload(){
        //some data to post the image
        fetch('my/API/Endpoint'), {
          method: 'post',
          body: body,
        })
       .then(function(data){
          setSpinner(true);
         };
        }
   return (
    <>
       <input type="file"/>
    
        <input onClick={upload}/>
        {spinner && (
        <p>something is loading</p>
        )}
    </>
   );   
        
 }

我確實想指出發布和獲取影像背后的邏輯確實有效，我確實獲得了狀態 200！它唯一不起作用的加載訊息

uj5u.com熱心網友回復：

您使用的方法將始終將微調器設定為 true..bcuz.then始終在 fetch 承諾決議后執行...

您需要在呼叫 fetch 之前將 spinner 設定為 true 并使 spinner false in .then.... 你需要這樣的東西

const [spinner, setSpinner] = useState(false);    

function upload(){
 setSpinner(true);

 //some async process
 fetch('my/API/Endpoint'), {
 method: 'post',.0
 body: body,
 }).then(function(data){
 setSpinner(false);
 };
}

uj5u.com熱心網友回復：

你顛倒了沒有？

1：將spiiner設定為true

2：api后設定spinner為false

const [spinner, setSpinner] = useState(false);    

function upload(){
 setSpinner(true);

 //some data to post the image
 fetch('my/API/Endpoint'), {
 method: 'post',
 body: body,
 }).then(function(data){
 setSpinner(false);
 };
}

uj5u.com熱心網友回復：

在獲取完成后，您將微調器狀態設定為 true。然后它永遠不會再次設定為 false。我期望的行為是文本一開始不可見，然后一旦獲取完成，它總是可見的。

您將要在上傳函式中將微調器狀態設定為 true，然后在承諾決議器（.then）中設定為 false

function upload(){
        //some data to post the image
        setSpinner(true)
        fetch('my/API/Endpoint'), {
          method: 'post',
          body: body,
        })
       .then(function(data){
          setSpinner(false);
         };
        }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/312523.html

標籤：反应邮政上传拿来

上一篇：使用PHP發送POST請求

下一篇：回圈遍歷req.body元素，當它只有1個元素時跳轉到字串