获取数据反应时显示加载

Question

我有一个 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！只有加载消息不起作用

Answer 1

您使用的方法将始终将微调器设置为 true..bcuz.then始终在 fetch Promise 解析后执行...

您需要在调用 fetch 之前将微调器设置为 true 并将微调器设置为 false .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);
 };
}