获取数据时显示加载反应

Question

我有一个提取调用，用户可以在其中上传图片，然后 post 它。但是，我想在 post 使用加载程序编辑图像时向用户显示。我的问题是我的装载机总是显示。始终显示文本 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>
        )}
    </>
   );   
        
 }

我确实想指出 post 获取图像背后的逻辑确实有效，我确实获得了状态 200！只有加载消息不起作用

Answer 1

你反了没有？

1: 将 spiiner 设置为 true

2：在 api

之后将微调器设置为 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);
 };
}

Answer 2

您使用的方法将始终将微调器设置为 true..bcuz .then 始终在获取承诺解决后执行...

您需要在调用 fetch 之前将微调器设置为 true，并在 .then 中将微调器设置为 false。您需要这样的东西

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

Answer 3

您在获取完成后将微调器状态设置为 true。然后它再也不会设置为 false。我期望的行为是文本一开始是不可见的，然后一旦提取完成它就总是可见的。

您将要在上传函数中将微调器状态设置为 true，然后在 promise 解析器（.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);
         };
        }

获取数据时显示加载反应

show loading when fetching data react

upload

post

fetch

reactjs